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

您可以通过在父级中保留子级组件的状态并将功能作为道具传递给子级组件以检测任何更改来实现。

因此，在您的情况下，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并设置作为道具传递的checked值（{{1 }}）。

checkedRadio

这是Code Sandbox.

上的有效示例

Answer 2

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

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

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

让我知道这是否有帮助。

如何处理另一个类的组件的onChange事件？

2 个答案: