Question

当通过传递实际值（例如）

时，我正在使用React构建此应用

<div class="form-group">
    <input 
       value={this.state.setupList[0]} onChange{this.handleChange}
       name="date" class="form-control"  placeholder={this.state.setupList[0]} />
</div>

我可以看到文本，但不允许修改，这就是我用于表格的功能：

handleChange(e) {
  this.setState({ [e.target.name]: e.target.value });
}

请有人提出解决此问题的更好方法

构造函数的结构

constructor(props) {
  super(props);
  this.handleChange = this.handleChange.bind(this);
  this.state = {
    setupList: [],
    title: '',
    description: '',
    show: false,
  };
}

我在互联网上发现的用于将输入存储为值的随机函数

handleChange(e) {
  this.setState({ [e.target.name]: e.target.value });
}

以此我更新数据库

updateData = e => {
    this.setState({ loading: true})
    const { currentUser } = fire.auth();
    e.preventDefault();
    let title = this.state.title;
    let description = this.state.description;
    fire.database().ref(`/master/${currentUser.uid}/setup/`)
    .update({
      title: this.state.title,
      description: this.state.description,
    })
    .then(() => {
    this.setState({ loading: false, show:false})
  });
}

问题可能在这里

componentDidMount = () => {
  fire.database().ref(`/master/${currentUser.uid}/setup/`)
  .on('value', snapshot => {
  var obj = snapshot.val()
  var setupList = []
  var keys = []
  for(let a in obj){
      setupList.push(obj[a])
      keys.push(a)
  }
   this.setState({
  setupList:setupList,
  keys:keys,

  ...

Answer 1

将value更改为defaultValue可以正常进行。这样简单的解决方案

<div class="form-group">
    <input 
       defaultValue={this.state.setupList[0]} onChange{this.handleChange}
       name="date" class="form-control" placeholder={this.state.setupList[0]} />
</div>

无法修改HTML表单的值或占位符

1 个答案: