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

【问题标题】：Cannot modify value nor placeholder of HTML forms无法修改 HTML 表单的值或占位符
【发布时间】：2019-03-05 16:50:55
【问题描述】：

当传递实际值时，我正在使用 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,

  ...

【问题讨论】：

因为您更新了date 状态变量中的值，并使用this.state.setupList[0]} 使用值属性。解决方案是使用value={this.state.date || ''} 或更新this.state.setupList[0]。如果要显示来自this.state.setupList[0] 的初始值，请这样写：value={this.state.date || this.state.setupList[0]}
请提供您的状态结构
@mayank-shukla 这不起作用
@blvkkasvp 它应该可以工作，你能展示你的完整代码吗？你有什么错误吗？
@nguyễn-thanh-tú 更新了问题

标签： html reactjs forms ecmascript-6

【解决方案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>

【讨论】：