如何从输入中获取价值？

Posted 2023-02-19

【中文标题】如何从输入中获取价值？

【英文标题】：How to get value from input?

【发布时间】：2020-11-14 16:45:01

【问题描述】：

我为找工作做了简单的任务。使用 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>
        )
    

【问题讨论】：

您不应该使用document.getElementById 来获取输入值。在反应中，您应该使用controlled component 来管理输入值。

或者，您可以保持输入不受控制，使按钮的类型为“提交”并将逻辑移动到表单的onSubmit 回调并使用提交事件来访问表单字段。

我不知道 Hooks 是什么样子的，我 e.target.name.value 或 this.input.name.value?

e.target.value 就足够了。 e.target 指向事件发生的 DOM 元素，所以 e.target.value 是字段中的值

【参考方案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>;

【讨论】：

谢谢你太棒了！我想知道是否存在从input 获取value 的另一个方法，为此我问了我的问题

请告诉我为什么将key=index 发送到<form/>？这意味着每个元素都有一个独立的<form/>?

@d2207 是的，因为您正在映射用户，所以映射的数组需要每个外部元素上的唯一反应键。每个用户都有自己的表单元素。