【发布时间】:2019-05-06 23:31:47
【问题描述】:
我有一个监听 onChange 事件的无线电输入组件。我还有一个监听 onClick 事件的包装元素。两个事件处理程序设置相同的状态。我希望在更改其他具有相同名称的无线电输入时调度另一个无线电输入的 onChange 事件。
【问题讨论】:
标签: reactjs
我有一个监听 onChange 事件的无线电输入组件。我还有一个监听 onClick 事件的包装元素。两个事件处理程序设置相同的状态。我希望在更改其他具有相同名称的无线电输入时调度另一个无线电输入的 onChange 事件。
【问题讨论】:
标签: reactjs
我也是 react 新手,但我认为当您调用元素时,您还应该在应用级别处理 onclick 事件。
<RadioButton label="label1" name="sameName" onClick={*dosomething*} />
在被点击的组件中设置props并在另一个组件中恢复props....
我也很好奇解决办法
【讨论】:
编辑(按照我们在 cmets 中的对话):
不应触发其他单选按钮的 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 事件表示的原因。
【讨论】: