如果组件用于多个输入，如何更改输入值答案

【问题标题】：how to change input value if component is using for multiple inputs如果组件用于多个输入，如何更改输入值
【发布时间】：2020-11-30 01:28:13
【问题描述】：

我有一个文本字段类型输入框，我希望在其中输入各种类型的值，当它是数字类型时，值应该从相应的函数中增加。我在这条线上收到错误onClick={(event) => handleChange(event)。给出handleChange之类的错误不是函数。但是在文本时，它会根据输入值而变化。

<TextField
      value="5"
      type={type}
      onChange={(event) => handleChange(event)}
    />
    {type === "number" ? (
      <Fragment>
        <i onClick={() => handleChange(value+1)} 
        />
        <i onClick={() => handleChange(value-1)} 
        />
      </Fragment>
    ) : null}

附：如果单击文本字段中的图标，我想增加值。这是一个handleChange函数：

handleChange(event, temp) {
const value = event.target.value;
const name = event.target.name;
if (value) {
  handleChange(name, [temp]);

}

【问题讨论】：

把问题加的更清楚，不清楚你想达到什么，错误是什么？
handleChange 这里看起来你正在推送一个事件对象 (event) => handleChange(event) 和一个值 () => handleChange(value+1) ，这是不正确的。那么，handleChange 是什么样的呢？ “类型”在哪里定义？需要更多上下文。
'type' 来自后端数据。所以当它是文本类型时，我使用“事件”。当它是数字类型时我想增加值
你的handleChange是什么样子的？
'handleChange' 是一个类似于 onChange 的常用函数，它接受输入值。

标签： javascript reactjs function components

【解决方案1】：

好的，您的问题并不完全清楚。但是我会尝试一下您可能需要的东西。

首先，让我们将输入用作“受控”组件。我们可以创建一些状态来保存我们当前的输入值..

  const [value, setValue] = React.useState(5);

我们可以使用“value”属性将value 推送到TextField。我们还可以在onChange 属性上使用setValue 捕获值。请记住，onChange 返回一个对象，我们需要从中获取值。

 <TextField
   value={value}  // <-- the display value set here
   type={type}
   onChange={(event) => setValue(event.target.value)}  //<-- the onChange event will update the value through setValue
 />

现在，我们还可以包含额外的位，并通过 onClick 事件改变值。

我们可以使用 setValue 突变方法设置 TextField 状态。

 {type === "number" ? (
        <Fragment>
          <i onClick={() => setValue((prevValue) => prevValue + 1)} />
          <i onClick={() => setValue((prevValue) => prevValue - 1)} />
        </Fragment>
      ) : null}

完整代码：(CodeSandbox)

import React, { Fragment } from "react";
import "./styles.css";
import TextField from "@material-ui/core/TextField";

export default function App() {
  const type = "number";

  const [value, setValue] = React.useState(5);

  return (
    <Fragment>
      <TextField
        value={value}
        type={type}
        onChange={(event) => setValue(event.target.value)}
      />
      {type === "number" ? (
        <Fragment>
          <i onClick={() => setValue((prevValue) => prevValue + 1)} />
          <i onClick={() => setValue((prevValue) => prevValue - 1)} />
        </Fragment>
      ) : null}
    </Fragment>
  );
}

【讨论】：