react在子组件设置父组件的select value的值

Question

问题

使用draft.js构建一个富文本编辑器，在实现设置字号功能时，使用了一个select选择框，想要实现的效果是，光标选中文本后，select的值变成选中的文本的字号；
现在可以获取到被选中的文本的字号，只要将select的值设置为被选中的字号即可，但是实现这个功能的过程中遇到了Maximum update depth exceeded的问题；

相关代码

// select的子组件
class SelectOptions extends React.Component {
  constructor() {
    super();
    this.onToggle = (e) => {
      e.preventDefault();
      console.log(this.props.style)
      this.props.onToggle(this.props.style);
    };
  }

  componentWillReceiveProps(nextProps) {
    // 问题出在这里
    // 尝试调用父组件传来的回调函数去设置父组件的状态
    if (nextProps.active) {
      nextProps.onSelectedHandler(nextProps.style)
    }
  }

  render() {
    return (
      <option
        value={this.props.style}
      >
        {this.props.label}
      </option>
    )
  }
}

// select组件
export default class FontSizeControl extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      value: 'font16'
    }
  }

  handleChange = e => {
    this.setState({
        value: e.target.value
    }, () => {
      this.props.onToggle(this.state.value)
    });
  }

  onSelectedHandler = (selected) => {
    console.log(selected)
    this.setState({
      value: selected
    });
  }

  render() {
    return (
      <select
        onChange={this.handleChange}
        value={this.state.value}
      >
        {fontSizeTag.map(type =>
          <SelectOptions
            key={type.label}
            active={this.props.editorState.getCurrentInlineStyle().has(type.style)}
            label={type.label}
            onToggle={this.props.onToggle}
            style={type.style}
            onSelectedHandler={this.onSelectedHandler}
          />
        )}
      </select>
    );
  }
}

报错信息

Answer 1

问题出在SelectOptions组件的

componentWillReceiveProps(nextProps) {
    // 问题出在这里
    // 尝试调用父组件传来的回调函数去设置父组件的状态
    if (nextProps.active) {
      nextProps.onSelectedHandler(nextProps.style)
    }
  }

优化调用onSelectedHandler时机