Question

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

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

我相信我传递的onChange函数会覆盖redux-form传递的其他一些onChange函数。尝试过很多东西，但结果却相同。

我正在考虑将value属性与ReactLink链接，但它已被弃用。

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

$(document).ready(function() {

  $(window).resize(function(e) {
    resize();
  });

  function resize() {
    if ($(window).width() > 500 && $('#mobile-nav-container').is(':visible')) {
      $('#mobile-nav-container').hide();
      $("#nav_open").hide();
      $("#nav_close").show();
    }
  }

  $('#nav_open, #nav_close').click(function() {
    $('#mobile-nav-container').toggle();
    $("#nav_open").toggle();
    $("#nav_close").toggle();
  });

});

它的用法如下：

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

Answer 1

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

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

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-form时定义了字段名称，则只需在自定义更改事件处理程序中为该字段调用默认的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>
  }
}

Redux-form onChange Handler可能被覆盖

3 个答案: