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 => {&nbsp; &nbsp; this.props.parentCallback(e.target.value)}并更改onClick为onChange

Answer 2

您可以向输入字段添加 onChange 属性，这会将输入作为事件处理。const handleChange = ( event ) => {&nbsp;console.log(event.target.value)}<input onChange={handleChange} type="text" name="name" id="myTextInput" />