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

Posted 2023-02-23

【中文标题】如果组件用于多个输入，如何更改输入值

【英文标题】：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 的常用函数，它接受输入值。

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