如何处理来自其他类组件的onChange事件？

Question

作为反应新手，我无法从<RadioGroup />组件中获取事件。我不知道如何或在哪里处理这些事件。请帮我找一个好的解决方案。我想这对于专家来说是一个真正的香草样本。非常感谢你。这里的大部分代码都不是实际问题，只是鸟瞰我正在使用的东西。再次感谢。

我有几个班这样的......

export default class Wellness extends React.Component {
  render() {
    return(
    <Statement 1... text={_text} id={_id} /> // for example
    <Statement 2... />
  }
}

class Statement extends React.Component {
  render() {
    return(
      <div id={'statement'+this.props.id}>
        <p>{ this.props.text }</p>
        <RadioGroup id={this.props.id} />
      </div>
    )
  }

}

class RadioGroup extends React.Component {
  render() {
    return(
      <div id={`group-${this.props.id}`}>
        <input type="radio" value={0}
          checked={this.state.checked === 0} />
        <label>0</label>
        <input type="radio" value={1}
          checked={this.state.checked === 1}/>
        <label>1</label>
        <input type="radio" value={2}
          checked={this.state.checked === 2}/>
        <label>2</label>
        <input type="radio" value={3}
          checked={this.state.checked === 3} />
        <label>3</label>
      </div>
    )
  }
}

Answer 1

您可以通过在父级中维护子组件的状态并将一个函数作为prop组件传递给子组件来检测任何更改来实现此目的。

所以在你的情况下，Wellness组件将保持所有Statement组件的状态，并将函数（handleStatement1RadioChange）作为prop（onRadioClick）及其状态（例如statement1Checked）传递给它，以便它可以知道任何变化。

这就是它的样子。

class Wellness extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      statement1Checked: 0
    };
  }

  handleStatement1RadioChange = checked => {
    this.setState({
      statement1Checked: checked
    });
  };

  render() {
    return (
      <Statements
        text="Statement 1"
        id={1234}
        currentChecked={this.state.statement1Checked}
        onRadioClick={this.handleStatement1RadioChange}
      />
    );
  }
}  

现在Statement组件已经收到了所需的道具，它将应用相同的策略，并将相同的道具传递给RadioGroup组件。

// Functional Component
const Statements = props => {
  const handleRadioGroupChange = checked => {
    props.onRadioClick(checked);
  };

  return (
    <div id={"statement" + props.id}>
      <p>{props.text}</p>
      <RadioGroup
        id={props.id}
        checkedRadio={props.currentChecked}
        onRadioChange={handleRadioGroupChange}
      />
    </div>
  );
};  

RadioGroup组件将调用传递给它的函数（handleRadioGroupChange）。这将调用由onRadioClick组件传递的函数（Wellness）。

现在，RadioButton组件将通过在onChange上实现input并设置作为prop（checked）传递的checkedRadio值来获取这些道具并处理其工作。

const RadioGroup = props => {
  const handleRadioChange = e => {
    const currentChecked = parseInt(e.target.value);
    props.onRadioChange(currentChecked);
  };
  return (
    <div id={`group-${props.id}`}>
      <input
        type="radio"
        value={0}
        checked={props.checkedRadio === 0}
        onChange={handleRadioChange}
      />
      <label>0</label>
      <input
        type="radio"
        value={1}
        checked={props.checkedRadio === 1}
        onChange={handleRadioChange}
      />
      <label>1</label>
      <input
        type="radio"
        value={2}
        checked={props.checkedRadio === 2}
        onChange={handleRadioChange}
      />
      <label>2</label>
      <input
        type="radio"
        value={3}
        checked={props.checkedRadio === 3}
        onChange={handleRadioChange}
      />
      <label>3</label>
    </div>
  );
};  

这是Code Sandbox.的工作示例

Answer 2

React中的常规方法是将函数（作为prop）传递给RadioGroup组件。在RadioGroup组件中，您可以通过以下方式调用此函数：

onChange={e => this.props.handleRadioChange(e, id)}

您可以将任意数量的参数传递给您在Parent组件中定义的handleRadioChange函数。请务必注意，如果您按照这种方式操作，您将通过父级的道具初始化状​​态。

如果这有帮助，请告诉我。