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

时间:2018-05-14 12:18:02

标签: javascript reactjs

我目前有点迷失 - 就像我想的那样 - 琐碎的任务。我的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,其中接受的答案提示引用,但我可能有很多复选框,对我来说似乎有点矫枉过正,创建引用只是为了传递复选框的当前状态。 我认为这有一个愚蠢的解决方案,但似乎我无法弄明白。

4 个答案:

答案 0 :(得分:3)

发送像这样的论据

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

然后在功能中使用此

event.target.checked

获取复选框的值

答案 1 :(得分:1)

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

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

答案 2 :(得分:1)

在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
     });
  }

答案 3 :(得分:1)

如果没有绑定你的函数并且你的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