ReactJS - 如何获取用户在文本输入中键入的内容以传递给回调函数

Question

我有一个组件，我想用它来通过文本输入框更改其父级的状态。现在，我有一个回调函数sendData，我用它来将信息传递回父级。它正在工作，但目前只是传递硬编码字符串“hi”。我想用文本输入中输入的任何内容替换此字符串。这是我的代码：class ChangeState extends Component {    sendData = () => {        this.props.parentCallback("hi");    }    render() {        return (            <div>                <input type="text" name="name" id="myTextInput" />                <button onClick={this.sendData}>                    Click to send data from child to parent component                </button>            </div>        );    }}我该怎么做呢？谢谢！

Answer 1

您必须在回调中捕获事件并从中获取值

sendData = e => {

    this.props.parentCallback(e.target.value)

}

并更改onClick为onChange

Answer 2

您可以向输入字段添加 onChange 属性，这会将输入作为事件处理。

const handleChange = ( event ) => {

 console.log(event.target.value)

}

<input onChange={handleChange} type="text" name="name" id="myTextInput" />