在 React Js 中单击按钮时填充 div 中的输入表单字段

Question

我必须在 reactjs 中单击按钮时显示用户在文本框下方的输入表单字段中输入的输入文本值。 我已经从渲染函数中创建了该函数，并且正在返回值并在单击按钮时调用该函数，但它对我不起作用。我没有得到我在同一页面上的文本框中编写的按钮单击的值。 有什么办法解决这个问题？

here i have created the function to set my nput state here i have to return the state on button click in expression

Answer 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。