獲取動態填充的輸入值React.js

Question

我對React很陌生，我之前從事過本機React工作，所以我對框架非常熟悉。 基本上我有一個對象數組，可以說包含5個項目。 我根據對象的數量填充視圖，因此，如果有5個對象，則我的map函數將同時填充5個輸入和5個輸入。 我的問題是如何獲取每個輸入的值？ 這是我的代碼：

array.map(map((item, index) => (
    <h1> item.title </h1>
    <input value={input from user} />
)

Answer 1

您必須使用狀態並使用onChange手動更新值

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    value: ''
    }
  }
  handleInputChange(e) {
    this.setState({
        [e.target.name]: e.target.value
    });
  }
  render () {
    return (
      <div>
        <input value={this.state.value} onChange={(e) => {this.handleInputChange(e)}} />

      </div>
    )
  }
}

ReactDOM.render(<App />,  document.getElementById('app'))

Answer 2

一種快速的解決方案是對所有輸入值使用數組。

const Inputs = ({array}) => {
    const [inputs, setInputs] = useState([]);

    const setInputAtIndex = (value, index) => {
        const nextInputs = [...inputs]; // this can be expensive

        nextInputs.splice(index, 1, value);

        setInputs(nextInputs);
    }

    return (
        ...
        array.map((item, index) => (
            <div key={index}>
                <h1>{item.title}</h1>
                <input
                    value={inputs[index]}
                    onChange={({target: {value}) => setInputAtIndex(value, index)}
                />
            </div>
        )
        ...
    );
}

請記住，在這種情況下，每次更改inputs都會使用[...inputs]復制inputs狀態數組。 如果您的陣列包含很多項目，這是一個性能問題。