我必须在 reactjs 中单击按钮时显示用户在文本框下方的输入表单字段中输入的输入文本值。我已经从渲染函数中创建了该函数，并且正在返回值并在单击按钮时调用该函数，但它对我不起作用。我没有得到我在同一页面上的文本框中写的按钮点击的value。有什么办法解决这个问题？
在 React Js 中单击按钮时在 div 中填充输入表单字段
IT技术
reactjs
ecmascript-6
2021-05-18 09:17:18
1个回答
这是你想要的吗？
class Test extends React.Component {
constructor(props){
super(props);
this.state = {
values: {},
showValues: {}
}
}
handleChange(name, e){
let values = this.state.values;
values[name] = e.target.value;
this.setState({values: values})
}
handleClick(e){
let inputValues = this.state.values;
this.setState({showValues: inputValues});
}
render(){
return (
<div>
<input type="text" value={this.state.values["one"]} onChange={this.handleChange.bind(this, "one")}/>
<p>{this.state.showValues["one"]}</p>
<input type="text" value={this.state.values["two"]} onChange={this.handleChange.bind(this, "two")}/>
<p>{this.state.showValues["two"]}</p>
<input type="text" value={this.state.values["three"]} onChange={this.handleChange.bind(this, "three")}/>
<p>{this.state.showValues["three"]}</p>
<input type="text" value={this.state.values["four"]} onChange={this.handleChange.bind(this, "four")}/>
<p>{this.state.showValues["four"]}</p>
<button onClick={this.handleClick.bind(this)}>Show value</button>
</div>
)
}
}
React.render(<Test />, document.getElementById('container'));
这是更新的jsfiddle。