javascript - react : How can I control a list of <input> with state?

Question

这是一个组件的最小工作示例，其中包含一种从列表创建的输入形式，以及一种从单个值创建的输入形式:

import React from 'react';

export default class App extends React.Component {
  constructor(props) {
    super(props);
  }

  state = {
    value: 'single value',
    values: ['one', 'two'],
  }

  render() {
    let test = this.state.values.map( (v, i) => {
      return <input
        key={ v }
        value={ v }
        onChange={ (e) => {
          let values = this.state.values;
          values[i] = e.target.value;
          this.setState({ values });
        } }
      />;
    } )

    return <div>
      <form>
        { test }
      </form>
      <form>
        <input
          value={ this.state.value }
          onChange={ (e) => this.setState({ value: e.target.value }) }
        />
      </form>
    </div>;
  }
}

产生这个:

当用户编辑第三个输入字段(“单值”)时，一切正常。用户输入内容，状态更新，大家都很高兴。

然而，当用户编辑前两个输入字段中的任何一个时，光标会在状态更新后立即失去焦点。要编辑此字段，用户必须在输入任何字母后单击该字段。

我该如何解决这个问题？有没有办法防止组件模糊 <input> ，或者有更好的方法来解决这个问题吗？

我不知道如何录制我的屏幕并从中制作 GIF。如果您不明白我的意思，我建议您使用 npx create-react-app my-app 创建一个 React 应用程序并编辑 my-app/src/App.js到我的代码示例。

Answer 1

问题是您将值作为 key 传递，对于每个新值，您都会得到一个新的 key，它 react “认为”它是一个新元素，因此重新-mount 元素，你失去了焦点

Read more about keys

let test = this.state.values.map( (v, i) => {
      return <input
        key={ v }
        value={ v }
        onChange={ (e) => {
          let values = this.state.values;
          values[i] = e.target.value;
          this.setState({ values });
        } }
      />;
    } )

不确定是否可以更改 state 结构，但我会采用不同的方法并创建一个 form 对象并提供 name 和 key 属性根据对象的键。

例子:

class App extends React.Component {
  state = {
    form: {
      name: "",
      userName: "",
      age: ""
    },
    externalValue: ""
  };

  onFormInputChange = ({ target }) => {
    const { form } = this.state;
    this.setState({
      form: {
        ...form,
        [target.name]: target.value
      }
    });
  };

  onInputChange = ({ target }) => {
    this.setState({ [target.name]: target.value });
  };

  render() {
    const { form } = this.state;
    let test = Object.entries(form).map(([key, value]) => {
      return (
        <input
          key={key}
          name={key}
          placeholder={key}
          value={value}
          onChange={this.onFormInputChange}
        />
      );
    });

    return (
      <div>
        <form>{test}</form>
        <form>
          <input
            name="externalValue"
            placeholder="externalValue"
            value={this.state.value}
            onChange={this.onInputChange}
          />
        </form>
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>