Redux形式的onChange處理程序可能被覆蓋

Question

我創建了一個條件字段，顯示“是”和“否”單選按鈕。 如果選擇是，則應顯示子組件。

下面的代碼完成了該任務。 問題是選擇是或否未在redux狀態下注冊。 如果我刪除onChange函數，則redux狀態將使用Yes或No值進行更新，但是子組件當然不會顯示。

我相信我傳遞的onChange函數會覆蓋redux-form傳遞的其他onChange函數。 嘗試了許多事情，但結果相同。

我本來只是想將value屬性與ReactLink鏈接起來，但已過時了。

使用React 0.15，Redux-Form 6.0 alpha和ES7。

const YesNoRadioButtonGroup = (props) =>
  <RadioButtonGroup {...props}>
    <RadioButton value='Yes' label='Yes' className={s.radio}/>
    <RadioButton value='No' label='No' className={s.radio}/>
  </RadioButtonGroup>

// TODO: Clear child fields when "No" is selected
// TODO: See if we can generalize into ConditionalField
export class ConditionalRadio extends React.Component {

  state = {conditional: false}

  updateConditional(event) {
    console.log(event)
    this.setState({conditional: event.target.value === 'Yes'})
  }

  render() {
    return <div>
      <Field name={this.props.name}
             component={YesNoRadioButtonGroup}
             onChange={::this.updateConditional} />  // The trouble line.

      {this.state.conditional ? this.props.children : null}
    </div>
  }
}    

它的用法如下：

       <ConditionalRadio name='willRelocate'>
              <Field name='willRelocateTo.withinCurrentState' component={Checkbox} label='Within Current State'/>
              <Field name='willRelocateTo.outOfState' component={Checkbox} label='Out of State'/>
              <Field name='willRelocateTo.outOfCountry' component={Checkbox} label='Out of Country'/>
        </ConditionalRadio>

Answer 1

您是否嘗試過使用componentWillReceiveProps函數，可以在其中檢查新值然后設置新條件？ 在這里查看所有有用的React生命周期功能

您的組件將這樣編寫：

export class ConditionalRadio extends React.Component {

  state = {conditional: false}

  componentWillReceiveProps(nextProps) {
    const displayChildren = nextProps.**value of the radio from redux form STORE** === 'Yes'
    this.setState({conditional: displayChildren});
  }

  render() {
    return (
      <div>
        <Field name={this.props.name}
               component={YesNoRadioButtonGroup}/>
          {this.state.conditional ? this.props.children : null}
      </div>
    )
  }
} 

Answer 2

如果在創建Redux表單時定義了字段名稱，則只需在自定義更改事件處理程序中為該字段調用默認的onChange事件。

在您的情況下，應為：

  updateConditional(event) {
    this.setState({conditional: event.target.value === 'Yes'});
    this.props.fields.name.onChange(event);
  }

Answer 3

這很好用：

class YesNoRadioButtonGroup extends React.Component {

  handleChange(event) {
    // Call the event supplied by redux-form.
    this.props.onChange(event)

    // If custom handler exists, call it.
    if (this.props.hasOwnProperty('customHandler')) {
      this.props.customHandler(event)
    }
  }

  render() {
    return <RadioButtonGroup {...this.props} onChange={::this.handleChange}>
        <RadioButton value='Yes' label='Yes' className={s.radio}/>
        <RadioButton value='No' label='No' className={s.radio}/>
      </RadioButtonGroup>
  }
}