javascript - 输入的每个更改都作为数据单独存储(例如 : "t", "te"、 "tes"、 "test"而不是只有 "test")

Question

事实上，我正在使用一个对象来存储我的表单收集的所有数据。在这个对象中，我有一个数组，我发现更新它的唯一解决方案是创建一个函数，将每个输入添加到一个数组中，然后设置:this.setState({ 'invites': array } );但是，问题是每次更改都会添加到数组并存储。我该如何解决这个问题？

<input
    className="form-input"
    type="email"
    placeholder="nom@exemple.com"
    name="invites"
    onChange={e => addToArray(e, "invites")}
    required
/>

function addToArray(e, name) {
     emailList.push(e.target.value);
     props.handleChangeArray(name, emailList);
}

handleChangeArray = (name, array) => {
    this.setState({ [name]: array });
};

Answer 1

编辑:

在下面的 StackSnippet 中，我更新了您的示例 ( OPs example can be found here )，展示了如何在提交时获取值:

const { useState } = React;

const WORD_LIST = ["Foo", "Bar", "Baz", "Rock", "Paper", "Scissors", "Hello", "Goodbye"];

function InviteInput(props) {
  const { value, onChange } = props;
  const handleChange = e => {
    onChange && onChange(e);
  };
  return (
    <li>
      <input
        value={value}
        onChange={handleChange}
        className="form-input"
        type="email"
        placeholder="nom@exemple.com"
        name="invites"
        required
      />
    </li>
  );
}

function AddInviteButton(props) {
  return (
    <button onClick={props.onClick}>
      Ajouter une autre personne // (Add another person)
    </button>
  );
}

function InviteForm({ onSubmit, initialInputCount }) {
  const [nbInvites, setNbInvites] = useState(
    [...Array(initialInputCount).keys()].map(i=>WORD_LIST[i])
  );

  const onAddInviteClick = () => {
    //let id = nbInvites.length + 1;
    setNbInvites([
      ...nbInvites,
      //{
        //id,
        //***********************************************************
        // THIS IS WHERE YOU SET THE DEFAULT VALUE FOR NEW INPUTS
        //***********************************************************
        /*value:*/ WORD_LIST[Math.floor(Math.random() * WORD_LIST.length)]
        //***********************************************************
      //}
    ]);
  };

  const handleChange = (event, index) => {
    let newstate = [...nbInvites];
    newstate[index]/*.value*/ = event.target.value;
    setNbInvites(newstate);
  };

  const handleSubmit = event => {
    onSubmit(event, nbInvites);
  };

  return (
    <div>
      {nbInvites.map((item, index) => {
        return (
          <InviteInput
            key={index}
            value={item}
            onChange={e => handleChange(e, index)}
          />
        );
      })}
      <AddInviteButton onClick={onAddInviteClick} />
      <br />
      <button onClick={handleSubmit}>Soumettre // Submit</button>
    </div>
  );
}

function App() {
  const [formVals, setFormVals] = useState();

  const doSubmit = (event, formValues) => {
    setFormVals(formValues);
  };

  return (
    <div className="page">
      <h2 className="box-title">
        Qui sont les eleves de cette classe ? // (Who are the students in this
        class?)
      </h2>
      <p>
        Vous pourrez toujours en ajouter par la suite // (You can always add
        some later)
      </p>
      <InviteForm onSubmit={doSubmit} initialInputCount={5} />
      {formVals ? <pre>{JSON.stringify(formVals, null, 2)}</pre> : ""}
    </div>
  );
}

ReactDOM.render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>

原始答案:

您需要使用 value 属性并使用 event.target.value 将输入的任何内容赋值。

像这样:

function Test() {
  const [inputs, setInputs] = React.useState([{
    id: 1,
    value: "1 initial"
  }, {
    id: 2,
    value: "2 initial"
  }]);
  
  const handleChange = (event, index) => {
    let newstate = [...inputs];
    newstate[index].value = event.target.value;
    setInputs(newstate);
  }
  
  const addInput = () => {
    let id = inputs.length + 1;
    setInputs([...inputs, {
      id,
      value: `${id} initial`
    }])
  }
  
  return(
    <div>
      <button onClick={addInput}>Add Input</button>
      {inputs.map((item, index) => {
        return <div><input type="text" value={inputs[index].value} onChange={e=>handleChange(e,index)} /></div>
      })}
    </div>
  );
}

ReactDOM.render(<Test />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>