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

Question

我想在按下编辑 button 时编辑我的 p 元素的文本。

当我点击编辑 button 时，我会显示一个 textarea 并获得带有警报的键控文本，但无法将该文本放入我的 p 元素。

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

当我按下编辑按钮时，编辑状态发生变化，文本区域显示下面的 up.The 代码。

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

您必须在单击按钮时在 state 上设置一个值，然后在渲染时读取该值。

示例：

handler : function () {
  this.setState({ value : 'hey' });
},

render : function () {
  return <p>{ this.state && this.state.value ? this.state.value : 'hoy' }</p>;
}

每次你想让render方法根据可能发生的事情改变，触发它的动作必须触发状态改变，并且改变状态对象，对象会被重新渲染，所以render方法应该检查当前状态。

如果您想更改输入（或者在您的情况下是文本区域）的值，您可以使用 linkedstate 模式作为双向数据绑定（更多 here）。

我特别用this lib。那里有很多例子。

Answer 2

您需要从状态变量中存储和检索文本。修改状态会导致重新渲染，然后将显示更新后的文本。从您的 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")
)

Answer 3

我确实遇到了同样的问题，这是我的解决方案：

{editableSubTasks.filter(id => id === subTask.Id).length > 0 ? <input type="text" /> : <span>{subTask.Name}</span>}

所以基本上，你有一个数组，在我的例子中是 editableSubTasks。每当我触发文本元素更改为文本区域时，我都会简单地将那个人添加到 edtiableSubTasks 数组中。然后在我的 map 函数中，如果对应项的 ID 在 editableSubTasks 数组中，我会使用三元运算符告诉它是 <input type="text">，否则只是 span。在您的情况下，您显然可以使用文本区域。结果非常好。这是我最终使用的答案：

如果你不需要数组，那么答案就更简单了，只要有一个bool，当你想要它是一个文本区域时，把它改成true。

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

How to edit an element's text with React.js?

javascript

edit

reactjs