Question

我有一个组件<Task />的列表，每个组件都有唯一的键<Task key={id} />，如果我渲染过，组件Task的内部有一个输入元素(<div><input type="text" /></div>)。 Task的4个组成部分如何通过键获取它们的输入元素值？

this.props.tasks.map((i) => {return (<Task key={i} />);

Task.jsx：

<Form.TextArea id={`newReplyId${this.props.taskId}`} />{' '}

我的问题：我想删除TextArea id并通过组件的键获取此元素吗？

Answer 1

您可以给Task一个onChange道具，该道具是一个调用函数，它将在您的tasks数组中给出事件和任务的索引，因此您可以更新适当的任务状态。

示例

function Task({ task, onChange }) {
  return (
    <div>
      <input value={task} onChange={onChange} />
    </div>
  );
}

class Tasks extends React.Component {
  state = { tasks: ["", "", "", ""] };

  onChange = (event, index) => {
    const { value } = event.target;

    this.setState(previousState => {
      const tasks = [...previousState.tasks];
      tasks[index] = value;
      return { tasks };
    });
  };

  render() {
    return (
      <div>
        {this.state.tasks.map((task, index) => (
          <Task
            key={index}
            task={task}
            onChange={e => this.onChange(e, index)}
          />
        ))}
      </div>
    );
  }
}

ReactDOM.render(<Tasks />, 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>

Answer 2

将方法传递给组件onchange

dirs.to.save1

并在任务组件中处理它以传输密钥和更改的值

tri.extract@data$key[i]

我如何从reactjs中的组件获取输入元素

2 个答案: