Javascript 在React中需要类似event.target.focus（）的内容

我正在创建一个动态列表组件，它基本上在每次向列表中添加内容时呈现一个新的空文本字段。该组件如下所示（它使用一个定制的TextFieldGroup，但我不认为代码是必要的，因为没有任何异常情况发生）：

一切正常，除非空白字段被更改（开始键入），否则会立即从任何字段中移除焦点。我正在寻找一种方法，以保持对这一领域的关注，同时仍在下面添加新的一个

---

提前感谢。

问题是您遇到了以下事件序列（假设

输入长度为5）：

1个字段（键=5）
用户开始键入“a”
您的状态更改已触发
React呈现2个全新字段（key=1&value=a'，key=5），并清除旧字段（key=5）
至少有两种解决方案

不删除/触发原始字段的重新渲染
这是更清洁的解决方案

首先，使用
slice
，您直接在
onChangeArray
中改变状态，因为。也许这现在不会引起问题，但这是一个大的反模式，可能会产生不可预测的行为

这里有一个快速解决方案：


onChangeArray=（e，index）=>{
const state=[…this.state[e.target.name]]；
如果（e.target.value==“”）{
状态。拼接（索引，1）；
this.setState（{[e.target.name]：state}）；
}否则{
状态拼接（索引1，即目标值）；
this.setState（{[e.target.name]：state}）；
}
};请详细说明。。一切正常，除非空白字段被更改（开始键入），否则会立即从任何字段中移除焦点。非常感谢！事实上，我应该知道如何使用扩展操作符（…），但我对这一切还是新手，谢谢你的关注。为了解决我的问题，我现在基本上删除了onChangeArray函数中的空字段，而不是通过过滤复制的状态（即newState=state.filter（item=>item！==“”）来删除组件中的空字段。我还通过使用此.setState（{[e.target.name]：[…newState，“]}）更新状态来添加最后一个字段。这样，我的组件就使用了您提到的一致的键引用。希望这更接近于反应式模式。
const DynamicInputList = ({ inputs, onChangeArray, label, name, errors }) => 
{
  const nonEmptyInputs = inputs.filter(input => {
    return input !== "";
  });
  const lastIndex = nonEmptyInputs.length;
  return (
    <div>
      {nonEmptyInputs.map((input, index) => {
        return (
          <Grid container spacing={16} key={index}>
            <Grid item xs={12}>
              <TextFieldGroup
                label={label}
                id={`${name}${index}`}
                name={name}
                value={input}
                onChange={e => onChangeArray(e, index)}
                errors={errors[name]}
              />
            </Grid>
          </Grid>
        );
      })}
      <Grid container spacing={16} key={lastIndex}>
        <Grid item xs={12}>
          <TextFieldGroup
            label={label}
            id={`${name}${lastIndex}`} 
            name={name}
            value={inputs[lastIndex]}
            onChange={e => onChangeArray(e, lastIndex)}
            errors={errors[name]}
          />
        </Grid>
      </Grid>
    </div>
  );
};

  onChangeArray = (e, index) => {
    const state = this.state[e.target.name];
    if (e.target.value === "") {
      state.splice(index, 1);
      this.setState({ [e.target.name]: state });
    } else {
      state.splice(index, 1, e.target.value);
      this.setState({ [e.target.name]: state });
    }
  };