Question

我只是试图处理React，所以我的问题似乎很简单，但我仍然坚持下去。

我有两个块（div.user-data__row），其中有一些值。我更改了组件的状态（handleChange函数），这些块被文本字段（textarea.text）替换的状态，我希望当我单击保存按钮并调用saveChange函数时，每个文本字段的值被带走并传递到街区（第1区到第1区等）。

我找到了使用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是只读的＆amp;因为可以在组件内部更改userData (email+name)，您必须在状态中填充 props 值，然后在此之后管理状态就足够了。

此外，您需要通过以下方式将textarea从非受控组件转换为受控组件：

使用值而不是defaultValue
使用该值的setState实现onChange作为处理程序。
textarea的值应该从州而不是道具中读取。

如果<UserData />的道具可能在其整个生命周期内从外部更新，则稍后您需要componentWillReceiveProps。

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

＆＃13;

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'))

＆＃13;

<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" />

＆＃13;

Answer 2

您正在从<div>收到this.props的值，这意味着这些值应来自某些外部来源并传递给您的组件。将这些值传递给组件props的方法超出了这个问题的范围，它可以以非常不同的方式实现。通常它来自父组件或来自某个连接的商店。

您需要从<textarea>表单字段中获取值，可以直接（使用ref）或使用某些提供表单处理的第三方库来完成。然后，这些值需要直接从组件的state或外部源（通过props）存储（和获取）。

不幸的是，您的问题范围过于宽泛，无法提供更准确的答案，但希望这些信息能够引导您找到某种解决方案。

Answer 3

您还可以使用contentEditable，它可以让您编辑div的内容。

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

    this.state = {
      edit: true
    };

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

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

  render() {
    const { edit } = this.state;

    return (
      <div className="user-data">
        <div className="user-data__row" contentEditable={edit}>{this.props.userData.name}</div>
        <div className="user-data__row" contentEditable={edit}>{this.props.userData.email}</div>
        <button onClick={this.handleChange}>
          {edit ? Save : Edit}
        </button>
      </div>
    )
  }
}

使用ReactJs

3 个答案: