无法从<textarea>

Question

我有一个带有预加载信息的表单，用于编辑现有对象。当我在输入字段中编辑信息时，一切正常，但是当我尝试在textarea中编辑内容时，文本将无法键入。如果我将属性“值”更改为“ defaultValue”，则旧文本不会显示在textarea中。我的组件代码：

 类PostEdit扩展了React.Component {
  构造函数（道具）{
    超级（道具）;
    this.state = {
      id：this.props.match.params.id，
      帖子：[]
    };
  }

  componentDidMount（）{
    this.showPost（this.state.id）;
  }

  showPost（id）{
    fetch（`/ api / v1 / posts / $ {id}`，
    {
      方法：“ GET”，
      标头：{
        '内容类型'：'应用程序/ json'
    }
    }）。then（（response）=> {返回response.json（）}）
    .then（（data）=> {this.setState（{post：data}）}）;
  }

  onChange =（e）=> {
    this.setState（{[e.target.name]：e.target.value}）;
  }

  渲染（）{
    const {name，content} = this.state.post;
    返回（
      

        

          
           
          
        
      
    ）;
  }
}
 

我做错了什么，如何使文本区域正常工作？

Answer 1

如果您打算将name和content用作this.state.post中的属性，请更新this.state中的初始constructor，至少将类型更改为数组[]到对象{}的对象，并将您的onChange()处理函数更新为目标this.state.post。另外，您需要在输入和文本区域上使用value属性，而不要使用defaultValue：

class PostEdit extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      id: this.props.match.params.id,
      post: {},
    };
  }

  componentDidMount() {
    this.showPost(this.state.id); // may consider using this.props.match.params.id instead here
  }

  showPost(id){
    fetch(`/api/v1/posts/${id}`, 
    {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
    }
    }).then((response) => {return response.json()})
    .then((data) => {this.setState({ post: data }) });
  }

  onChange = (e) => {
    this.setState({ post: { ...this.state.post, [e.target.name]: e.target.value } });
  }

  render () {
    const { name, content } = this.state.post;
    return (
      <div>
        <form className="form" onSubmit={this.onSubmit}>
          <input id="name" className="form-control" type="text" name="name" value={name} onChange={this.onChange} required />
          <textarea id="content"  className="form-control" name="content" rows="8" cols="40" value={content} onChange={this.onChange}></textarea>    
          <input type="submit" value="Save" className="btn btn-success" id="btn-submit" />
        </form>
      </div>
    );
  }
}

这里是example的动作。

希望有帮助！