Question

我有一个无线电输入组件，它监听onChange事件。我还有一个包装器元素，用于监听onClick事件。两个事件处理程序都设置相同的状态。我希望当其他具有相同名称的单选输入更改时调度另一个单选输入的onChange事件。

Answer 1

我也是React的新手，但我认为您在调用元素时还应该在应用程序级别处理onclick事件。

<RadioButton label="label1" name="sameName" onClick={*dosomething*} />

在单击的组件中设置道具，然后在另一个组件中恢复道具。...

我也对解决方案感到好奇

Answer 2

编辑（在评论中进行对话）：
其他单选按钮的onchange事件不应触发。为什么？因为尽管这些按钮是多个单选按钮，但它们仍表示单个输入（单个问题的单个答案）。
因此，当选中其中一个选项时，仅会更改一个值，因此仅应触发一个onchange事件。

例如，如果我们使用无线电输入选择水果：

const RadioInput = ({ name, value, label }) => (
  <div>
    <input type="radio" name={ name } value={ value }/>
    <label>{ label }</label>
  </div>
);

const RadioGroup = ({ name = 'fruit' }) => (
  <div>
    <RadioInput name={ name } value="mango" label="Mango"/>
    <RadioInput name={ name } value="banana" label="Banana"/>
    <RadioInput name={ name } value="melon" label="Melon"/>
  </div>
);

然后，当我们选择其中一个选项时，我们正在回答一个问题：我们想要哪种水果？

这就是为什么它由单个onchange事件表示的原因。

当一个具有相同名称的其他无线电输入发生更改时，将触发一个无线电输入的onChange事件

2 个答案: