Javascript 如何编辑元素'；有React.js的文本吗？

当我按下编辑按钮时，我想编辑我的

p

元素的文本

当我单击编辑

按钮

时，我会显示一个

文本区域

，并获得带有警报的键入文本，但无法将该文本放入我的

p

元素

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

当我按下编辑按钮时，编辑状态改变，文本区出现。下面的代码

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()
    }
  }

renderNormal:function（）{
返回(
编辑我

编辑
)
},
renderForm:function（）{
返回(
拯救
)
},
render:function（）{
if（this.state.editing）{
返回此
}否则{
返回此值。renderNormal（）
}
}

您必须在单击按钮的

状态上设置一个值，然后在渲染时读取该值

例如：

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

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

处理程序：函数（）{
this.setState（{value:'hey'}）；
},
渲染：函数（）{
返回{this.state&&this.state.value？this.state.value:'hoy'}
；
}

每当您希望渲染方法根据可能发生的情况进行更改时，触发它的操作必须触发状态更改，并更改状态对象，并且对象将重新渲染，因此渲染方法应检查当前状态

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

---

我特别使用。这里有很多示例。

您需要存储和检索状态变量中的文本。修改状态会导致重新渲染，然后将显示更新的文本。从您的JSFIDLE复制。。。请注意，我在您的状态中添加了“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")
)

var MyCom=React.createClass({
getInitialState:函数（）{
返回{
编辑：错，
//**此处用空字符串初始化“text”属性
文本：“”
}
},
编辑：函数（）{
这是我的国家({
编辑：对
})
},
保存：函数（）{
var val=this.refs.newText.value；
警报（val）
这是我的国家({
//**使用新值更新“text”属性（再次激发render（））
文本：val，
编辑：假
})
},
renderNormal:function（）{
//**在中呈现“state.text”，无论其是否为空。。。
返回(
{this.state.text}

编辑
)
},
renderForm:function（）{
返回(
拯救
)
},
render:function（）{
if（this.state.editing）{
返回此
}否则{
返回此值。renderNormal（）
}
}
})
ReactDOM.render(
,
文档查询选择器（“.box”）
)

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

{editablesubtask.filter（id=>id==subTask.id）.length>0？：{subTask.Name}

基本上，你有一个数组，在我的例子中是

editablesubtask

。每当我触发text元素更改为textarea时，我只需将这个家伙添加到

edtiableSubTasks

数组中。然后在我的

map

函数中，如果对应项的Id在

editableSubTasks

数组中，我会使用三元运算符告诉它是

，否则就只是

span

。在您的情况下，显然您可以使用textarea。这一切都很顺利。下面是我的答案，我最终使用：

---

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

是的，答案在上面