javascript - 使用 ReactJs 将文本区域值保存到 div

Question

我只是想处理 React，所以我的问题可能看起来很简单，但我仍然坚持下去。

我有两个 block (div.user-data__row)，其中有一些值。我更改组件的状态(handleChange 函数)，这些 block 被文本字段(textarea.text)替换的状态，并且我希望当我单击保存按钮并调用 saveChange 函数时，每个文本字段的值被获取并传递到 block (第一个文本区域到第一个 block 等)。

我找到了使用 ref 属性解决类似案例的示例，但后来了解到这不再是实际的解决方案，因此没有人这样做。请帮我找到实际的实现路径。

class UserData extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      edit: true,
    };

    this.handleChange = this.handleChange.bind(this);
    this.saveChange = this.handleChange.bind(this);
  }

  handleChange() {
    this.setState(() => ({
      edit: !this.state.edit,
    }));
  }

  saveChange() {
    this.setState(() => ({
      edit: false
    }))
  }

  render() {
    if (this.state.edit) {
      return (
        <div className="user-data">
          <div className="user-data__row">{this.props.userData.name}</div>
          <div className="user-data__row">{this.props.userData.email}</div>
          <button onClick={ this.handleChange }>Edit</button>
        </div>
      );
    } else {
      return (
        <div className="user-data">
          <textarea className="text" defaultValue={this.props.userData.name}></textarea>
          <textarea className="text" defaultValue={this.props.userData.email}></textarea>
          <button onClick={ this.saveChange }>Save</button>
        </div>
      )
    }
  }
}

Answer 1

因为props是只读的&因为 userData (email+name)可以在组件内部更改，您必须在 state 中填充 props 值，然后管理状态就足够了。

此外，您还需要通过以下方式将文本区域从不受控组件转换为受控组件:

• 使用 value 而不是 defaultValue

• 使用该值的 setState 作为处理程序来实现 onChange。

• textarea 的值应该从 state 而不是 props 读取。

如果<UserData />的 Prop 可能会在其整个生命周期中从外部更新，您将需要 componentWillReceiveProps稍后。

您还有一个拼写错误 if (!this.state.edit) {而不是if (this.state.edit) { .

class UserData extends React.Component {
    state = {
      edit: true,
      userDataName: this.props.userData.name, // Populate props values
      userDataEmail: this.props.userData.email, // Populate props values
    };
  
  
  handleChange = () => {
    this.setState((state) => ({
      edit: !state.edit,
    }));
  }

  saveChange =() => {
    this.setState(() => ({
      edit: false
    }))
  }

  render() {
    if (!this.state.edit) {
      return (
        <div className="user-data">
          <div className="user-data__row">{this.state.userDataName}</div>
          <div className="user-data__row">{this.state.userDataEmail}</div>
          <button onClick={ this.handleChange }>Edit</button>
        </div>
      );
    } else {
      return (
        <div className="user-data">
          <textarea className="text" value={this.state.userDataName}  onChange={(e) => this.setState({userDataName: e.target.value})}></textarea>
          <textarea className="text" value={this.state.userDataEmail} onChange={(e) => this.setState({userDataEmail: e.target.value})}></textarea>
          <button onClick={ this.saveChange }>Save</button>
        </div>
      )
    }
  }
}



ReactDOM.render(<UserData userData={{name: 'Abdennoor', email: 'abc@mail.com'}} /> , document.querySelector('.app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div class="app" />