javascript - defaultValue 正在拉取 React 中的最后一个值

Question

如果我点击一个特定的 ToDos 编辑按钮，它的值应该默认在文本区域内但是每次最后一个 ToDo 都是默认值，有人可以帮忙，无论使用 ref 是正确的选择还是其他选择，那么我错在哪里我应该怎么做？

 handleEdit() {
  e.preventDefault();
  .....

}  

renderDisplay() {
    return(
      <div>
       {
        this.props.listArr.map((list,i) => {
           return(
             <div key={i} index={i} ref="newText">
              <li>{list}
                <div>
                 <button className="btn btn-primary btn-xs glyphicon glyphicon-pencil"
                         onClick={this.handleEdit.bind(this)}
                 />
                </div>
              <hr/>
              </li>
             </div>
           )})
       }
       </div>
    );
  }


  renderForm() {
   return(
      <div>
        <textarea className="form-control" defaultValue={this.refs.newText.innerText} rows="1" cols="100" style={{width: 500}}/>
      </div>
    )
  }

  render() {
      if(this.state.editing) {
        return this.renderForm();
      }else {
        return this.renderDisplay();
      }
    }
}

Answer 1

首先，您使用的是 old ref API .你应该使用 this one ，您可以在其中使用带有回调的 this 将 ref 设置为类的实例。

<input ref={ref => {this.myInput = ref}} />

然后您可以通过引用 this.myInput 来访问它的值。

至于您的“错误”，请记住您正在循环并覆盖 ref。所以最后一个 ref 赋值将是数组中的最后一项。

 this.props.listArr.map((list,i) => {
           return(
             <div key={i} index={i} ref="newText">
              <li>{list}

总会有 1 个 newText ref，它永远是数组中的最后一项。

您应该根据项目id渲染不同的ref名称，然后将项目的id传递给renderForm，以便它可以访问相关引用。

话虽如此，我真的建议将 todo 提取到不同的组件和表单中。在这种情况下，我没有看到使用 refs 的正当理由。

编辑
作为您评论的后续行动，这里有一个小示例，说明您如何使用组件而不是 refs 来从 child 那里获取信息，例如值等。

class Todo extends React.Component {
  onClick = () => {
    const { todoId, onClick } = this.props;
    onClick(todoId);
  }

  render() {
    const { value, complete } = this.props;
    return (
      <div
        style={{ textDecoration: complete && 'line-through' }}
        onClick={this.onClick}
      >
        {value}
      </div>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: [
        { id: '1', value: 'to do this', complete: false },
        { id: '2', value: 'todo that', complete: true },
        { id: '3', value: 'will do it later', complete: false }]
    }
  }

  toggleTodo = (todoId) => {
    const { todos } = this.state;
    const nextState = todos.map(todo => {
      if (todo.id !== todoId) return todo;
      return {
        ...todo,
        complete: !todo.complete
      }
    });
    this.setState({ todos: nextState });
  }

  render() {
    const { todos } = this.state;
    return (
      <div >
        {
          todos.map((todo) => {
            return (
              <Todo
                complete={todo.complete}
                key={todo.id}
                todoId={todo.id}
                value={todo.value}
                onClick={this.toggleTodo}
              />
            )
          })
        }
      </div>
    );
  }
}


ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>