Question

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

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

Answer 1

您正在使用的React版本要求您执行此操作：

this.refs.newItem.getDOMNode().value

在更新的版本中，当你执行this.refs.newItem时，它实际上将返回dom节点，但在你在这个小提琴中使用的版本中，它返回一个React组件对象。当你调用getDOMNode()时，它将获得实际的DOM元素，然后你可以调用常规的DOM属性

this.refs.something.value返回undefined in react

1 个答案: