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