如何使react输入显示状态值ReactJS

Question

通过使用class，这里有一个小参考：

Class ShowValue Extends Component{
constructor(props){
super(props);
this.state = {
name: “ “,
}
}
onChangeHandler = (e) => {
this.setState(
name: e.target.value,
)
}
render(){
return (
<input type=” text” onChange={this.onChangeHandler} value=” My name”>
<p>{this.state.name}</p>
); 
} 
}

我是否能够为每个输入字段创建一个变量，并监听onChange事件，然后使用钩子为该变量调用"set"函数。

Answer 1

我已经更改了您的代码，现在如果您在输入文本中写入，它将保存在您的州名称中，反之亦然。如果您在代码中以州名称写入某些内容，它将显示在输入中。

我建议你查看一些教程，甚至官方文档

import React from 'react';
class ShowValue extends React.Component {
constructor(props) {
super(props);
this.state = {
name: ''
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({ name: event.target.value });
}
render() {
return (
<div>
<input
value={this.state.name}
type="text"
onChange={this.handleChange}
/>
<p>{this.state.name}</p>
</div>
);
}
}
export default ShowValue;

记住：

• 您需要编写一个父元素来返回不同的子元素，否则会出错。所以我已经包装了input和p元素。

• 不能将”用于javascript单引号或双引号中的字符串'或"

演示：https://stackblitz.com/edit/react-j4a4dv?file=src%2FShowValue.js

Answer 2

通过设置输入的值属性来显示输入内部的值

<input value={this.state.name} type=”text” onChange={this.onChangeHandler} >