Javascript this.refs.something.value返回值在react中未定义

单击编辑，然后会出现一个输入栏，我希望当我单击保存按钮时，我可以获得用户的输入，但为什么我没有定义？控制台中没有错误

var-App=React.createClass({
getInitialState（）{
返回{
项目：[1、2、3]，
isEdit:空
};
},
renderditform（）{
返回(
拯救
);
},
ItemCtrl（索引）{
if（index！=this.state.isEdit）{
返回(
编辑
);
}
},
编辑（一）{
this.setState（{isEdit:i}）；
},
saveHandler（）{
console.log（this.refs.newItem.value）；//为什么这是未定义的？
this.setState（{isEdit:null}）；
},
renderItem（）{
返回(
this.state.items.map（（item，i）=>
{this.state.isEdit==i？this.renderditform（）：item}{this.ItemCtrl（i）}
）
);
},
render（）{
返回(

{this.renderItem（）}

);
}
});

您使用的React版本要求您执行以下操作：

this.refs.newItem.getDOMNode（）.value

---

在较新的版本中，当您执行

this.refs.newItem

时，它实际上会返回dom节点，但在您在此小提琴中使用的版本中，它会返回一个React组件对象。当您调用

getDOMNode（）

时，它将获得实际的DOM元素，然后您可以调用常规的DOM属性

您使用的React版本要求您执行以下操作：

this.refs.newItem.getDOMNode（）.value

---

在较新的版本中，当您执行

this.refs.newItem

时，它实际上会返回dom节点，但在您在此小提琴中使用的版本中，它会返回一个React组件对象。当您调用

getDOMNode（）

时，它将获得实际的DOM元素，然后您可以调用常规的DOM属性

谢谢。一个问题，为什么当我改变状态时输入字段的值消失了？我没有改变那部分，这对我来说是什么？关于编辑问题，缩进更改是受欢迎的，但请避免更改代码，即使这是最佳实践。那将是一个意外@EmileBergeron我粘贴到文本编辑器中更改缩进，当它最初缩进错误时，仍然没有找到好的方法来进行堆栈内溢出。这一切都很好，反正也不是什么大的改变！感谢您的编辑；）@Sandy在您的中没有

值=

属性。如果你想让它保持任何一种状态，你可以做一些类似于

的事情，然后确保有一个实际的状态或道具控制输入值。谢谢。一个问题，为什么当我改变状态时输入字段的值消失了？我没有改变那部分，这对我来说是什么？关于编辑问题，缩进更改是受欢迎的，但请避免更改代码，即使这是最佳实践。那将是一个意外@EmileBergeron我粘贴到文本编辑器中更改缩进，当它最初缩进错误时，仍然没有找到好的方法来进行堆栈内溢出。这一切都很好，反正也不是什么大的改变！感谢您的编辑；）@Sandy在您的中没有

值=

属性。如果您想让它保持任何类型的状态，您可以执行类似于

的操作，然后确保存在控制输入值的实际状态或道具。

var App = React.createClass({
  getInitialState() {
    return {
      items : [1, 2, 3],
      isEdit: null
    };
  },
  renderEditForm() {
    return (
      <div>
        <input type="text" ref="newItem" />
        <button onClick={ this.saveHandler }>Save</button>
      </div>
    );
  },

  ItemCtrl(index) {
    if (index != this.state.isEdit) {
      return (
        <div className="itemCtrlWrap">
          <button onClick={ this.editHandler.bind(this, index) }>Edit</button>
        </div>
       );
    }
  },
  editHandler(i) {
    this.setState({ isEdit: i });
  },
  saveHandler() {

    console.log(this.refs.newItem.value); // why is this undefined?
    this.setState({ isEdit: null });
  },

  renderItem() {
    return (
     this.state.items.map((item, i) =>
       <li key={ i }> {this.state.isEdit == i ? this.renderEditForm() : item} {this.ItemCtrl(i)}</li>)
    );
  },
  render() {
    return (
      <ul>
        {this.renderItem()}
      </ul>
    );
  }
});