从 <textarea> 更新 React.js 状态时遇到问题答案

【问题标题】：Trouble updating React.js state from <textarea>从 <textarea> 更新 React.js 状态时遇到问题
【发布时间】：2019-04-05 01:02:01
【问题描述】：

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

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

  componentDidMount() {
    this.showPost(this.state.id);
  }

  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({ [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" defaultValue={name} onChange={this.onChange} required />
          <textarea id="content"  className="form-control" name="content" rows="8" cols="40" defaultValue={content} onChange={this.onChange}></textarea>    
          <input type="submit" value="Save" className="btn btn-success" id="btn-submit" />
        </form>
      </div>
    );
  }
}

我做错了什么以及如何使 textarea 正常工作？

【问题讨论】：

this.state.post 的预期类型应该是什么？在您的render() 函数中，您将其视为一个对象，在showPost() 中将其视为一个对象，并在showPost() 中将其视为一个数组。您是否打算让content 和name 成为this.state.post 的物业？ name 和 content 不在 this.state.post 之外，您同意吗？
帖子看起来像{"id": 2,"name": "name","content": "content"}。有简化的例子。其实字段很多（大约30个），如果每个属性都在外面，那就太重复代码了。
查看我的答案和工作示例。谢谢！

标签： reactjs textarea onchange

【解决方案1】：

如果您打算将name 和content 用作this.state.post 中的属性，则至少更新constructor 中的初始this.state，将类型从数组[] 更改为对象@987654328 @ 并将您的 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 正在使用中。

希望对您有所帮助！

【讨论】：