Question

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

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。

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

1 个答案: