Question

我正在使用React 16.我有一个输入字段需要填充数据库中的值，我需要它可以编辑。

如果我使用：

<FormControl type="text" ref="price" id="precio" value={this.state.precioVenta} />

输入字段填充值但不允许我编辑。我试过了

<FormControl type="text" ref="price" id="precio" defaultValue={this.state.precioVenta} />

但它没有填充值

Answer 1

您需要处理变更。如果您只是设置值，它将始终设置为：

<FormControl 
  type='text'
  name='precio' 
  defaultValue={this.state.precioVenta}
  onChange={this.handleChange.bind(this)}
/>

handleChange(event) {
    let fieldName = event.target.name;
    let fieldVal = event.target.value;
    this.setState({...this.state, [fieldName]: fieldVal})
}

Answer 2

它看起来像是典型的状态更新问题。你在哪里更新你的州？我猜您需要手动处理输入更改：

<FormControl type="text" value={this.state.precioVenta} onChange={this.handlePrecioChange} />

，其中

handlePrecioChange(event) {
  this.setState({ precioVenta: event.target.value }, () => {
    this.validatePrecioVenta(); // if needed
  });
}

并且不要忘记在组件的构造函数上绑定组件的实例上下文，以使处理程序内的this正常工作：

constructor {
  this.handlePrecioChange = this.handlePrecioChange.bind(this);
}

Answer 3

你有没有理由不使用placeholder代替价值？ <FormControl type="text" ref="price" id="precio" placeholder={this.state.precioVenta} />

添加＆＃34;值＆＃34;时，html输入不可编辑参数

3 个答案: