代码之家 › 专栏 › 技术社区 › Vladimir Humeniuk

使用ReactJs将textarea值保存到div

reactjs javascript

Vladimir Humeniuk · 技术社区 · 8 年前

我只是在试着处理反应,所以我的问题可能看起来很简单,但我还是被它卡住了。

我有两个块(div.user-data\uu row),其中有一些值。我更改组件的状态(handleChange函数),即这些块被文本字段(textarea.text)替换的状态,我希望当我单击save按钮并调用saveChange函数时,每个文本字段的值都被提取并传递给块(第一个textarea到第一个块,等等)。

我找到了使用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>
      )
    }
  }
}

3 回复 | 直到 8 年前

Abdennour TOUMI 8 年前

props 只读(&M);因为 userData (email+name) 可以在组件内更改,您必须填充道具状态 ,然后管理状态就足够了。

使用value而不是defaultValue
使用该值的setState作为处理程序实现onChange。

如果道具 <UserData /> 可能在其整个生命周期内从外部更新,您将需要 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" />

Flying 8 年前

<div> 从…起 this.props ,这意味着这些值应该来自某个外部源,并传递给您的组件。将这些值传递给组件的方法 props 这超出了这个问题的范围,可以用非常不同的方式实现。通常它要么来自父组件,要么来自某个连接的存储。

您需要从您的 <textarea> 表单字段,可以直接(使用ref)或使用提供表单处理的第三方库来完成。然后需要直接从组件的 state 或从外部来源(通过 道具 ).

不幸的是,你们的问题范围太广,无法给出更准确的答案,但希望这些信息能引导你们找到某种解决方案。

ruanmer 8 年前

您也可以使用 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>
    )
  }
}