在 React 中，如何将输入值传递给回调函数？

Question

每当输入值发生变化时，我想在 React 组件中调用一些回调。

简化示例应说明：

在 jsx 文件中：

<input onKeyDown={this.props.changeCallback( VALUE_OF_INPUT )} ></input>

VALUE_OF_INPUT 应该是什么？

谢谢！

Answer 1

<input value={this.state.value} onKeyDown={this.props.changeCallback.bind( this, this.state.value)} ></input>

会做这份工作。

Answer 2

没有太多关于 React 的内容。使用传递给回调的 event 作为第一个参数：

onKeyDown={event => this.props.changeCallback(event.target.value)}

此方法（使用 fat arrow function）还处理绑定 this，但每次渲染都会创建一个新的匿名函数。请注意，调用 bind 本质上做同样的事情，所以这是我在两者中的首选。

重要的是要区分将函数分配给 onKeyDown 属性（如此处所做的那样）和调用函数（您所做的）。

Answer 3

另一种实现动态的方法是给它一个值回调，如果从某个变量预填充 "value"，这种方法效果很好。

/* Better function for larger forms */
handleChange = (event) =>  {
    var name = event.target.name;
    var value =  event.target.value;
    this.setState({[name]: value});
}
/* set Default and callback to state */
valueCallback = (value, name) => {
    if (this.state[name]) {
        return this.state[name]
    }
    else {
        return value;
    }
}

那你可以去...

 var defaut = '1234'; // or this.props.something.something;

 <input type={type} name={name} value={this.valueCallback(defaut, name)}  onChange={this.handleChange} />

在 React 中，如何将输入值传递给回调函数？

In React, how do I pass input value to callback function?

reactjs

react-jsx

redux

react-redux