Question

我正在尝试将全局状态更改为特定的文本字段，例如：

const [values, setValues] = React.useState({ name: '' });

const setName = () => (e: React.ChangeEvent<HTMLInputElement>) => {
  setValues({ name: e.target.value });
};

// map starts here
{editMode ? (
  <TextField
    id={`txt-${category.id}`}
    label="New name"
    value={values.name}
    onChange={setName()}
    margin="normal"
  />
)

因此，当我第一次单击文本字段时，应将值设置为该文本字段，并将全局状态设置为category.name，在键入后应将文本字段值设置为与我的文本字段相等的全局状态在变化中，我该如何处理这样的事情？

Answer 1

从setName中删除第二个函数，并从TextField的onChange属性中删除方括号。

const [values, setValues] = React.useState({ name: '' });

const setName = (e: React.ChangeEvent<HTMLInputElement>) => {
  setValues({ name: e.target.value });
};

// map starts here
{editMode ? (
  <TextField
    id={`txt-${category.id}`}
    label="New name"
    value={values.name}
    onChange={setName}
    margin="normal"
  />
)

或...

您还可以编写一个用于设置值的通用函数，而不是setName和其他通用函数：

const setAnyValue = (e: React.ChangeEvent<HTMLInputElement>, field: string) => {
  setValues({ [field]: e.target.value });
};

然后onChange看起来像：

    onChange={(e) => setAnyValue(e, 'name')}

Answer 2

解决了问题

type InputType = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;

const updateField = (id: number, e: React.ChangeEvent<InputType>) => {
  setData(prevState => {
    return prevState.map(item => {
      if (item.id === id) return { ...item, name: e.target.value };

      return item;
    });
  });
};

// inside the map 
value={data.find(i => i.id === category.id)!.name}
onChange={e => updateField(category.id, e)}

更改地图内的特定文本框

2 个答案: