Javascript 反应-在默认值更改时执行函数

如果单选按钮的值更改为默认值，我想显示一个保存按钮。假设默认值为“红色”。用户从红色变为绿色我想显示一个保存按钮。假设用户在保存绿色选项之前再次更改为红色，那么我不想显示它

从“React”导入React，{Component}； 从“道具类型”导入道具类型； /*呈现无线组*/ 类无线电扩展组件{ 构造器{ 超级作物； 此.state={ 已选择：道具已选择 }; this.onChange=this.onChange.bindthis； } 昂昌切夫{ this.setState{selected:ev.target.value}； this.props.onChangeev； } 渲染{ 常数{ 选项、InputClass、LabelClass、hiddenLabel、名称、内联 }=这是道具； 回来 { options.mapoption=>{ 常数{ id、值、标签 }=期权； 回来 {label} ; } } ; } } Radio.propTypes={ 选项：PropTypes.arrayOfPropTypes.shape{ id:PropTypes.OfType[PropTypes.string，PropTypes.number]之一。需要， 值：PropTypes.OfType[PropTypes.bool，PropTypes.string，PropTypes.number]之一。需要， 标签：PropTypes.oneOfType[PropTypes.string，PropTypes.number] }.要求， 名称：PropTypes.string.isRequired， 选中：PropTypes.oneOfType[PropTypes.bool，PropTypes.string，PropTypes.number]， inputClasses:PropTypes.string， labelClasses:PropTypes.string， hiddenLabel:PropTypes.bool， onChange:PropTypes.func， 内联：PropTypes.bool }; Radio.defaultProps={ 选定：， 输入类：， 标签类别：， 隐藏标签：假， 内联：错， onChange:=>{} };

---

导出默认收音机 您可以提供并支持对组件的onChange回调

因此，在您的应用程序中，您将添加一个处理程序，在该处理程序中，您将获得所选的无线电值，并将其保持在应将DOContainer转换为有状态组件的状态。选择了默认值和默认值后，可以比较它们并有条件地显示

类似的内容将是渲染方法实现：

const options = [
  {
    id: 'red',
    label: 'Red',
    value: 'red'
  },
  {
    id: 'green',
    label: 'Green',
    value: 'green'
  }
];

class DOContainer extends Component {
  constructor(props) {
    super(props)

    const initialValue = 'red'

    this.state = {
      // Default value. It will be always the same.
      default: initialValue,
      // What's the Radio value. It will be keep in sync with the selected Radio value.
      // Initially it has the same value as `initivalValue`,
      // but later will be updated by `onRadioChange`.
      selected: initialValue,
    }

    this.onRadioChange = this.onRadioChange.bind(this)
  }

  onRadioChange (selected) {
    this.setState({ selected })
  }

  render() {
    const { selected, default } = this.state

    return (
      <Fragment>
        <div className="do-container">
          <h2>choose a color</h2>
          <div>
            <p>color choose</p>
            <Radio
              options={options} name="do" inline
              selected={selected}
              onChange={this.onRadioChange}
            />

            { selected !== default ? <Button /> : null }
          </div>
        </div>
      </Fragment>
    );
  }
}

---

你应该使用一个有状态的组件。我已经添加了我的无线电组件。你能告诉我我需要更新什么吗。还有我怎样才能使有状态组件成为我的DO组件。你的收音机看起来不错。你应该像我在回答中所做的那样，一改道具就传给它。您的收音机是有状态组件，因此您应该对do组件执行相同的操作。简言之，更改收音机值后，您应该更新do组件状态。我尝试使用代码，但无效。我在DO容器中没有看到“default”属性。您应该在DO容器构造函数状态中初始化默认字段。