Question

我目前有点迷失 - 就像我想的那样 - 琐碎的任务。我的React App中有一些带有onClick功能的复选框。现在我需要将信息传递给函数，如果我刚刚选中或取消选中该复选框。

<input type="checkbox"
       name={field}
       id={field}
       onClick={() => this.buildTemplate(objectA, objectB, checkboxState)}
/>
<label htmlFor={field}>
    {getLabel(`${this.props.modelType}.${fieldName}`)} 
</label>

当调用该函数时，我需要根据复选框的状态做一些事情。

buildTemplate = (objectA, objectB, checked) => {
    checked ? yep() : nope();
};

我试图绑定像这样的复选框，但是它有效，但现在我不知道如何在这个函数中传递其他参数。

onClick={this.testFunc.bind(this)}

...

testFunc(event) {
    console.log(event.target.checked)
}

我还找到this question，其中接受的答案提示引用，但我可能有很多复选框，对我来说似乎有点矫枉过正，创建引用只是为了传递复选框的当前状态。我认为这有一个愚蠢的解决方案，但似乎我无法弄明白。

Answer 1

发送像这样的论据

 onClick={(event) => this.buildTemplate(objectA, objectB, event)

然后在功能中使用此

event.target.checked

获取复选框的值

Answer 2

您可以将onClick处理程序中的事件对象传递给action方法，如下所示：

<input type="checkbox"
       name={field}
       id={field}
       onClick={(event) => this.buildTemplate(objectA, objectB, event)}
/>

Answer 3

在React

中获取复选框更改的结果非常简单

参见示例Here

或

<强>简单地

 <input type="checkbox"
   name={field}
   id={field}
    onChange={this.handleInputChange} 
   />    





  handleInputChange(event) {
  const target = event.target;
  const value = target.type === 'checkbox' ? target.checked : target.value;
  const name = target.name;

     this.setState({
     [name]: value
     });
  }

Answer 4

如果没有绑定你的函数并且你的onClick没有箭头功能，你可以定义一个外部箭头函数并为onClick设置它：

// or name this function as buildTemplate and use for onClick below
handleCheck = ( event ) =>
    event.target.checked
        ? yep()
        : nope()


<input type="checkbox"
       name={field}
       id={field}
       onClick={this.handleCheck}
/>
<label htmlFor={field}>
    {getLabel(`${this.props.modelType}.${fieldName}`)} 
</label>

我知道你需要一些物品，但我认为你可以触及你的功能。为什么我建议使用此方法：https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md

如何将复选框状态传递给React

4 个答案: