如何使用React.js编辑元素的文本？

Question

我想p按编辑时编辑元素的文本button.

当我单击编辑时button,我显示一个textarea并获取带有警报的键控文本但不能将该文本放入我的p元素.

用React.js做简单的方法是什么？

的jsfiddle

当我按下编辑按钮时,编辑状态更改和textarea显示.下面的代码.

renderNormal: function() {
    return (
      <div>
        <p>Edit me</p>
        <button onClick={this.edit}>Edit</button>
    </div>
    )
  },
  renderForm: function() {
    return (
      <div>
         <textarea ref="newText" defaultValue="Edit me"></textarea>
        <button onClick={this.save}>Save</button>
    </div>
    )
  },
  render: function() {
    if (this.state.editing) {
      return this.renderForm()
    } else {
      return this.renderNormal()
    }
  }

Answer 1

您需要存储和检索状态变量中的文本.修改状态会导致重新渲染,然后显示更新的文本.从您的JSFiddle复制...注意我在您的州添加了"text"属性

var MyCom = React.createClass({
  getInitialState: function() {
    return {
      editing: false,
      // ** Initialize "text" property with empty string here
      text: ''
    }
  },
  edit: function() {
    this.setState({
      editing: true
    })
  },
  save: function() {
    var val = this.refs.newText.value;
    alert(val)
    this.setState({
      // ** Update "text" property with new value (this fires render() again)
      text: val,
      editing: false
    })
  },
  renderNormal: function() {
    // ** Render "state.text" inside your <p> whether its empty or not...
    return (
      <div>
        <p>{this.state.text}</p>
        <button onClick={this.edit}>Edit</button>
    </div>
    )
  },
  renderForm: function() {
    return (
      <div>
         <textarea ref="newText" defaultValue="Edit me"></textarea>
        <button onClick={this.save}>Save</button>
    </div>
    )
  },
  render: function() {
    if (this.state.editing) {
      return this.renderForm()
    } else {
      return this.renderNormal()
    }
  }
})

ReactDOM.render(
  <div>
  <MyCom/>
    <MyCom/>
    </div>,
  document.querySelector(".box")
)