如何在提交btn點擊時將值推送到陣列中（反應js）

我有一個帶有自定義輸入的問題表。

const Input = (props) => {
    return (
        <div>
            <label className={classes.label}>{props.label}
            <input className={classes.input} {...props}/>
            </label>
        </div>
    );
};

我從服務器獲取問題串列并將它們設定為questions. 然后我創建一個表格來回答這些問題。

<form onSubmit = {onAnswersSubmit}>
     {questions?.map((item) =>
         <Input key={item.id} id={item.id} label={item.question}/>)}
      <Button> Submit </Button>
</form>

我想在提交按鈕單擊時將輸入中的答案推送到陣列中，但不知道該怎么做。

uj5u.com熱心網友回復：

您可能應該為此使用狀態。陣列的一種狀態（我稱之為它state），另一種用于捕獲問題的答案（一個物件）。

當一個輸入的onChange監聽器被觸發時，它會呼叫handleChange. 此函式從輸入中獲取名稱和值（注意：此示例假定您可以將name屬性添加到從服務器接收的資料中），然后更新answers狀態。

單擊按鈕時，完成answers狀態（一個物件）被添加到主狀態陣列中。

const { useEffect, useState } = React;

function Example({ data }) {

  // Initialise the states
  const [ state, setState ] = useState([]);
  const [ answers, setAnswers ] = useState({});

  // Push the completed answers object into
  // the state array, then reset the answers state
  function handleClick() {
    setState([ ...state, answers ]);
    setAnswers({});
  }

  // Get the name and value from the input
  // and update the answers state
  function handleChange(e) {
    const { name, value } = e.target;
    setAnswers({ ...answers, [name]: value });
  }

  // Log the main state when it changes
  useEffect(() => console.log(state), [state]);

  return (
    <div>
      {data.map(obj => {
        const { id, name, question } = obj;
        return (
          <input
            key={id}
            name={name}
            placeholder={question}
            onChange={handleChange}
          />
        );
      })}
      <button onClick={handleClick}>Submit</button>
    </div>
  );

}

const data = [
  { id: 1, name: 'name', question: 'What is your name?' },
  { id: 2, name: 'age', question: 'How old are you?' },
  { id: 3, name: 'location', question: 'Where do you live?' }  
];

ReactDOM.render(
  <Example data={data} />,
  document.getElementById('react')
);

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

uj5u.com熱心網友回復：

您可以使用 htmlinput的onChange道具并從您的父表單傳遞一個 onChange 函式來處理它，如下所示：

// This is assuming this is inside a functional component

const [answers, setAnswers] = useState([]);

const onAnswerChange = useCallback((index, answer) => {
  setAnswers((oldAnswers) => {
    oldAnswers[index] = answer;
    return oldAnswers;
  });
}, [setAnswers]);

return 
<form onSubmit = {onAnswersSubmit}>
     {questions?.map((item, index) =>
         <Input key={item.id} 
                id={item.id} 
                label={item.question}
                value={answers[index] ?? ''}
                onChange={(e) => onAnswerChange(index, evt.target.value)}/>)}
      <Button> Submit </Button>
</form>

然后，您可以將存盤的狀態answers用作 onAnswersSubmit 回呼的一部分。

uj5u.com熱心網友回復：

const [answers, setAnswers] = useState([]);

const handleAnswerChange = (index, answer) => {
    let olddata=answers;
    olddata[index]=answer;
    setAnswers([...olddata]);
}


const Input = (props) => {
    return (
        <div>
            <label className={classes.label}>{props.label}
            <input className={classes.input} {...props}/>
            </label>
        </div>
    );
};

<form onSubmit = {onAnswersSubmit}>
     {questions?.map((item) =>
         <Input key={item.id} id={item.id} label={item.question} onChange={handleAnswerChange}/>)}
      <Button> Submit </Button>
</form>

標籤：javascript 反应 形式

上一篇：如何從下面的代碼中在React中提交后洗掉表單值？

下一篇：驗證表單時僅在JS中延遲頁面重新加載