13.React 中的复选框 onChange

如何从 React 中的 onChange 事件的复选框发送值

    <h1>Select What You Want</h1>
      <div>
        <input id="box1" onChange={checkValue} type="checkbox" value="Box1"/>
        <label htmlFor="#box1">Box 1</label>
      </div>
      <div>
        <input id="box2" onChange={checkValue} type="checkbox" value="Box2"/>
        <label htmlFor="#box2">Box 2</label>
      </div>
      <div>
        <input id="box3" onChange={checkValue} type="checkbox" value="Box3"/>
        <label htmlFor="#box3">Box 3</label>
      </div>
      <div>
        <input id="box4" onChange={checkValue} type="checkbox" value="Box4"/>
        <label htmlFor="#box4">Box 4</label>
      </div>

我们使用调用函数 checkValue 的 onChange 方法创建具有不同值的复选框列表

一旦我们使用调用函数 checkValue 的 onChange 方法创建了一个复选框列表，我们将创建函数 checkValue，该函数将接受包含选中复选框值的参数 e，我们将 console.log 用户检查的复选框值。

function checkValue(e) {
    var value = e.target.value;
    console.log("You selected " + value);
  }

 展示