Question

我有一些要为用户填写的输入文本字段，因为它将是配置的默认值。

如何将其转移到React中的状态变量？

我有：

<input type="number" style={header} value = "5" onChange={this.handleChange('blah')}></input> <br />

作为输入字段，您可以在其中看到将值设置为5的方法。如何将其传输到构造函数中的状态变量“ blah”：

    constructor(props) {
    super(props);
    this.state = {
        blah: '',
    }

谢谢。

Answer 1

您可以这样实现：

state = {
    blah : "hello"
  }
  handleChange = (e) => {
    this.setState({blah:e.target.value})
  }
  render(){
    return (
      <input type="text" 
      value = {this.state.blah} 
      onChange={this.handleChange}></input> 

    );
  }

实时示例：https://codesandbox.io/s/hungry-kare-50cbn

要了解更多信息，请参阅以下文档：https://reactjs.org/docs/forms.html

Answer 2

您应该将自己的组件设为controlled or uncontrolled，现在两者都做，所以请将您的组件作为输入的唯一事实来源：

state = {
    value : 'default'
}

render() { 
    return <input value={this.state.value} onChange={e => this.setState({value: e.target.value />
})}

从输入类型文本获取默认值并将其设置为状态

2 个答案: