如何从输入中获取价值？

Question

我为找工作做了简单的任务。使用 react 和 redux。当我从输入中获得价值并将它们发送到减速器时，它们就会迷路。等等，没那么容易。 reducer 获取的第一个项目获取道具名称、年龄、类型、索引并返回新状态。好的。但其他物品在途中丢失了道具名称和年龄。什么？他们是怎么做到的？ Reducer 返回空 obj 进行渲染。不要在 dispatch 中看 obj，我会返工。

减速器

case 'EDIT_ITEM':
            console.log(action.name, action.age, action.id);
            return state.map((item, index) =>
                action.id === index
                    ? {
                        name: action.name,
                        age: action.age
                    }
                    : item
            );

App.js

function EditUsers() {
        const listItems = users.map(function (value, index) {
            return (
                <form>
                    <div className="input-group">
                        <div className="input-group-prepend">
                            <span className="input-group-text">{value.name}, {value.age}</span>
                        </div>
                        <input type="text" placeholder="New name" id="newName" className="form-control"/>
                        <input type="text" placeholder="New age" id="newAge" className="form-control" aria-describedby="button-addon2"/>
                        <div className="input-group-append">
                            <button onClick={() => dispatch({
                                type: 'EDIT_ITEM',
                                id: index,
                                name: document.getElementById('newName').value,
                                age: document.getElementById("newAge").value
                            })}
                                    className="btn btn-outline-primary"
                                    type="button"
                                    id="button-addon2">
                                Изменить
                            </button>
                        </div>
                    </div>
                </form>
            )
        });
        return (
            <div>{listItems}</div>
        )
    }

Answer 1

您将无法从按钮的 onClick 事件访问输入值，但如果您决定让输入不受控制并将逻辑移动到关联表单的 onSubmit 回调，那么您可以访问表单的onSubmit 事件中的字段值。

定义一个submitHandler 函数来使用index 和提交事件e：

const submitHandler = index => e => {
  e.preventDefault(); // <-- prevent the default form action, important!
  const { newName, newAge } = e.target; // <-- destructure the inputs from the event target

  dispatch({
    type: "EDIT_ITEM",
    id: index,
    name: newName.value, // <-- extract the input value
    age: newAge.value // <-- extract the input value
  });
};

这里输入值的路径是e.target.<fieldId>.value。请注意，我还定义了 submitHandler 来对索引进行柯里化，这可以在映射元素时实现更优化的使用。

接下来，将submitHandler 回调附加到表单的onSubmit 属性。

const listItems = users.map(function(value, index) {
  return (
    <form key={index} onSubmit={submitHandler(index)}>
      ...

这里的柯里化函数 submitHandler(index) 获取索引并将其包含在回调实例中，返回一个接受 onSubmit 事件对象 e => {... 的函数。

最后，将按钮更新为具有type="submit" 而没有onClick 处理程序。

<button
  className="btn btn-outline-primary"
  type="submit"
  id="button-addon2"
>
  Изменить
</button>

完整代码

const submitHandler = index => e => {
  e.preventDefault();
  const { newName, newAge } = e.target;

  dispatch({
    type: "EDIT_ITEM",
    id: index,
    name: newName.value,
    age: newAge.value
  });
};

function EditUsers() {
  const listItems = users.map(function(value, index) {
    return (
      <form key={index} onSubmit={submitHandler(index)}>
        <div className="input-group">
          <div className="input-group-prepend">
            <span className="input-group-text">
              {value.name}, {value.age}
            </span>
          </div>
          <input
            type="text"
            placeholder="New name"
            id="newName"
            className="form-control"
          />
          <input
            type="text"
            placeholder="New age"
            id="newAge"
            className="form-control"
            aria-describedby="button-addon2"
          />
          <div className="input-group-append">
            <button
              className="btn btn-outline-primary"
              type="submit"
              id="button-addon2"
            >
              Изменить
            </button>
          </div>
        </div>
      </form>
    );
  });
  return <div>{listItems}</div>;
}