react在子組件設(shè)置父組件的select value的值

問題

使用draft.js構(gòu)建一個(gè)富文本編輯器，在實(shí)現(xiàn)設(shè)置字號(hào)功能時(shí)，使用了一個(gè)select選擇框，想要實(shí)現(xiàn)的效果是，光標(biāo)選中文本后，select的值變成選中的文本的字號(hào)；
現(xiàn)在可以獲取到被選中的文本的字號(hào)，只要將select的值設(shè)置為被選中的字號(hào)即可，但是實(shí)現(xiàn)這個(gè)功能的過程中遇到了Maximum update depth exceeded的問題；

相關(guān)代碼

// 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) {
    // 問題出在這里
    // 嘗試調(diào)用父組件傳來的回調(diào)函數(shù)去設(shè)置父組件的狀態(tài)
    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>
    );
  }
}

報(bào)錯(cuò)信息