Question

当我按下编辑p时，我想编辑我的button元素的文字。

当我点击修改button时，我会显示textarea并获取带警报的键控文字，但无法将该文字投放到我的p元素。

使用React.js执行此操作的简单方法是什么？

当我按下编辑按钮时，编辑状态更改和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复制...注意我已经添加了＆＃34;文本＆＃34;财产到你的州

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 2

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

示例：

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

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

每次你希望render方法根据可能发生的事情而改变时，触发它的动作必须触发状态改变，并改变状态对象，并且对象将被重新渲染，因此render方法应检查当前状态。

如果要更改输入的值（或者在您的情况下是textarea），可以将linkedstate模式用作双向数据绑定（更多here）。

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

Answer 3

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

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

基本上，你有一个数组，在我看来是editableSubTasks。每当我触发文本元素更改为textarea时，我只会将该人添加到edtiableSubTasks数组中。然后在我的map函数中，如果相对项的Id在editableSubTasks数组中，我将使用三元运算符将其称为<input type="text">，否则只是span {1}}。在你的情况下，显然你可以使用textarea。这非常有效。这是我最后使用的答案：

How to dynamically show/hide a list of items in react

如果你不需要数组，那么答案就更简单了，只需要一个bool，当你希望它成为一个文本区域时将其改为true。

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

3 个答案: