从 JSX 输入元素反应更新状态

Question

我有一个小型 React 应用程序。 该项目的目的是管理产品。 这些产品包含功能。 下面的示例是用于配置产品功能价格的页面。

export function App() {

  // This state is manage by HTTP calls
  const [features_dict, set_features_dict] = useState({"features": []});

  // I want to display the details of my list
  return (
    <div className={s.main_container}>
      <FeaturesDetail FeaturesDict={features_dict} />
    </div>
  )


}

我的 FeaturesDetail 组件

export function FeaturesDetail({FeaturesDict}) {

  const listFeaturesElement = FeaturesDict.features.map(feature =>
    <tbody>
      <td>{feature.name}</td>
      <td>
        <input
            type="number"
            value={feature.price}
        />
      </td>
      <td><button>Update</button></td>
    </tbody>
  );

  return (
    <div>
      <table>
        <thead>
          <td>Name</td>
          <td>Price</td>
        </thead>
        {listIngredientsElement}
      </table>
    </div>
  );

}

React 事件似乎阻止我修改输入字段。

我的最终目标是更新 features_dict 状态并运行一个函数以在 HTTP 调用中发送它。 此 HTTP 调用将更新后端数据库中的产品配置。

Answer 1

您需要将

onChange

元素上的

onInput

或

input

事件设置为将更新价格的函数，在

App

组件中定义该函数并将其作为 prop 传递给

FeaturesDetail

组件（在定义状态的地方），该函数有两个参数，第一个参数是产品的唯一标识符，例如

name

或

id

，第二个参数是新的

price

，然后用新价格更新具有此唯一标识符的产品。

App.js

export function App() {
  const [featuresDict, setFeaturesDict] = useState({ "features": [] });

  const updateFeaturePrice = (featureName, newPrice) => {
    const updatedFeatures = featuresDict.features.map(feature => {
      if (feature.name === featureName) {
        return { ...feature, price: newPrice };
      }
      return feature;
    });

    setFeaturesDict({ features: updatedFeatures });
  };

  return (
    <div className={s.main_container}>
      <FeaturesDetail featuresDict={featuresDict} onPriceChange={updateFeaturePrice} />
    </div>
  );
}

FeaturesDetail.js

export function FeaturesDetail({ featuresDict, onPriceChange }) {

  const listFeaturesElement = featuresDict.features.map((feature, index) =>
    <tr key={index}>
      <td>{feature.name}</td>
      <td>
        <input
          type="number"
          value={feature.price}
          onChange={(e) => onPriceChange(feature.name, e.target.value)}
        />
      </td>
      <td><button>Update</button></td>
    </tr>
  );

  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          {listFeaturesElement}
        </tbody>
      </table>
    </div>
  );
}

另外，我建议您将变量重命名为 camelCase 以适应 javascript 标准

Answer 2

有受控输入或非受控输入。每当你将一个值传递到 React 中的输入字段时，你就表明它是受控制的，并且你将处理它的值的变化。例如：

<input type="text" value={inputVal} />

以上意味着您的代码应该更新

inputVal

，以便输入字段显示它。

为此，您必须添加一个更改处理程序：

<input type="text" value={inputVal} onChange={changeHandler}/>

此changeHandler更新inputVal并触发重新渲染以在输入文本字段中显示更新的inputVal。

以上是针对受控。如果你觉得领域不如不受控制，那么你要做的就是改成这样：

        <input
            type="number"
            defaultValue={feature.price}
        />