【问题标题】:Fire onChange event of one radio input when another radio input with the same name changes当另一个具有相同名称的无线电输入发生更改时,触发一个无线电输入的 onChange 事件
【发布时间】:2019-05-06 23:31:47
【问题描述】:

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

Here's my problem

【问题讨论】:

    标签: reactjs


    【解决方案1】:

    我也是 react 新手,但我认为当您调用元素时,您还应该在应用级别处理 onclick 事件。

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

    在被点击的组件中设置props并在另一个组件中恢复props....

    我也很好奇解决办法

    【讨论】:

      【解决方案2】:

      编辑(按照我们在 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 事件表示的原因。

      【讨论】:

      • 但不允许用户在几个可实现的选项中选择一个选项,这些选项可以通过同名输入实现,即无线电输入。能说说为什么不推荐吗?关于问题本身,选中/取消选中无线电输入会在其自身上触发 onchange 事件,但是对于具有相同名称的无线电输入,组中的其他无线电输入也会改变其状态,不是吗?但是该输入上的 onchange 事件不会触发。我想因此触发另一个无线电输入的 onchange 事件。
      • 我误解了你的问题,我将编辑我的回复并删除关于同名和多选输入的部分,并在那里添加我的答案。
      猜你喜欢
      • 2018-07-30
      • 2017-05-10
      • 2021-09-03
      • 2017-10-01
      • 1970-01-01
      • 2017-07-04
      • 1970-01-01
      • 2021-01-29
      • 2011-10-24
      相关资源
      最近更新 更多