Javascript Redux表单onChange处理程序可能被覆盖

我创建了一个条件字段，其中显示是和否单选按钮。如果选择“是”，则应显示子组件

下面的代码实现了这一点。问题是选择是或否未在redux状态中注册。如果我删除onChange函数，那么redux状态将更新为Yes或No值，但子组件当然不会显示

我相信我传递的onChange函数正在覆盖redux表单传递的其他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>
  }
}    

const YesNoRadioButtonGroup=（道具）=>
//TODO:选择“否”时清除子字段
//TODO:看看我们能否推广到条件域
导出类ConditionalRadio扩展React.Component{
状态={conditional:false}
updateConditional（事件）{
console.log（事件）
this.setState（{conditional:event.target.value=='Yes'}）
}
render（）{
回来
//麻烦线。
{this.state.conditional？this.props.children:null}
}
}    

它是这样使用的：

       <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>

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>
    )
  }
} 

---

您是否尝试使用功能componentWillReceiveProps，您可以在其中检查新值，然后设置新条件？请参阅所有有用的生命周期函数

您的组件的编写方式如下：

       <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>

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>
    )
  }
} 

export class ConditionalRadio扩展React.Component{
状态={conditional:false}
组件将接收道具（下一步）{
const displayChildren=nextProps.**来自redux表单存储的无线电值**==='Yes'
this.setState（{conditional:displayChildren}）；
}
render（）{
返回(
{this.state.conditional？this.props.children:null}
)
}
} 

您是否尝试使用功能componentWillReceiveProps，您可以在其中检查新值，然后设置新条件？请参阅所有有用的生命周期函数

您的组件的编写方式如下：

       <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>

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>
    )
  }
} 

export class ConditionalRadio扩展React.Component{
状态={conditional:false}
组件将接收道具（下一步）{
const displayChildren=nextProps.**来自redux表单存储的无线电值**==='Yes'
this.setState（{conditional:displayChildren}）；
}
render（）{
返回(
{this.state.conditional？this.props.children:null}
)
}
} 

这很有效：

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>
  }
}

类YesNoRadioButtongGroup扩展了React.Component{
手变（活动）{
//调用redux表单提供的事件。
this.props.onChange（事件）
//如果自定义处理程序存在，则调用它。
if（this.props.hasOwnProperty（'customHandler'））{
this.props.customHandler（事件）
}
}
render（）{
回来
}
}

这很有效：

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>
  }
}

类YesNoRadioButtongGroup扩展了React.Component{
手变（活动）{
//调用redux表单提供的事件。
this.props.onChange（事件）
//如果自定义处理程序存在，则调用它。
if（this.props.hasOwnProperty（'customHandler'））{
this.props.customHandler（事件）
}
}
render（）{
回来
}
}

如果在创建redux表单时定义了字段名，则只需在自定义更改事件处理程序中调用该字段的默认onChange事件即可

在您的情况下，应该是：

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

---

如果在创建redux表单时定义了字段名，那么只需在自定义更改事件处理程序中调用该字段的默认onChange事件

在您的情况下，应该是：

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

---

这很有可能@AvraamMavridis这是一个很快的发现。这会是一个错误吗？你知道在哪里可以找到解决方法吗？根据文档/示例，你不需要在组件内部维护状态，这是你需要的原因吗？通过“侦听”存储/传递的参数应该可以实现您想要的功能。@AvraamMavridis只是保留状态以确定是否显示子字段。（顺便说一句，使用版本6，是alpha）这很有可能@AvraamMavridis是一个快速的发现。这会是一个错误吗？你知道在哪里可以找到解决方法吗？根据文档/示例，你不需要在组件内部维护状态，这是你需要的原因吗？通过“侦听”存储/传递的参数应该可以实现您想要的功能。@AvraamMavridis只是保留状态以确定是否显示子字段。（使用版本6 btw，以字母表示）这应该是什么？

**来自redux表单的无线电值**

？是我没有在这里显示的信息吗？新的反应，所以当

组件将接收道具时，我需要做一些工作来摸索。这是他从redux表单中给组件的属性？我猜如果您的组件连接到redux表单存储，所有字段值都映射到您的组件中。。。我还没有实现redux表单，但我认为它是这样工作的。我明白你的意思。但是我不应该
connect（）
ing到Redux吗？感觉这样做可能会不必要地复杂。如果您想在不处理onChange的情况下从收音机中了解所选的值，这是唯一的方法，不是吗？您已经得到了所有想要修复错误的方法，开始：）这应该是什么
**redux表单中收音机的值**
？是我没有在这里显示的信息吗？新的反应，所以当
组件将接收道具时，我需要做一些工作来摸索。这是他从redux表单中给组件的属性？我猜如果您的组件连接到redux表单存储，所有字段值都映射到您的组件中。。。我还没有实现redux表单，但我认为它是这样工作的