1

我已经知道“值”与受控组件一起使用。但是在这个测试中，当我删除该属性时value = {controlledValue}，它仍然可以正常工作。

import React, { useState } from "react";

export const Controlled = props => {
  const [controlledValue, updateControlledValue] = useState("");

  const handleChange = event => {
    updateControlledValue(event.target.value);
  };

  const handleSubmit = event => {
    event.preventDefault();

    props.handleSubmittedData({
      controlled: controlledValue
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>Controlled</h2>
      <input
        name="controlled"
        placeholder="controlled"
        type="text"
        value={controlledValue}
        onChange={handleChange}
      />
      <button disabled={!controlledValue} type="submit">
        Submit
      </button>
    </form>
  );
};

value当我们已经处理了controlledValue状态时，拥有财产有什么意义handleChange？

4

1 回答 1

2

没有必要添加 value = {controlledValue}

但是，当您需要在开始输入之前或在某些 API 调用或操作之后为输入框提供特定值时，它可能会有所帮助。（这就是术语“受控”的意思，您可以在某些操作后控制值）

例如

如果您有一个产品编辑页面，并且您需要编辑已存储在 DB 中的产品名称。在这种情况下，您需要显示存储在 DB 中的初始值，并且用户可以对其进行编辑和保存。

对于这种情况，在我们从 API 获得成功响应后，只需将产品名称分配给 value。

或者

如果您需要在单击按钮时将特定文本添加到输入框中您可以将特定文本分配给值。

于 2021-10-01T12:16:40.667 回答