Question

我有一个带有4列值的react-bootstrap表。我正在寻找一种使用react hooks useState的方法，其中-我可以在同一状态对象中维护所有列值的状态，并且每当任何列值的状态更改时，整个行都将更新。

我对Reactjs和React钩子非常陌生，请告知我是否可以使用其他任何React钩子来完成。谢谢！

在下面的代码中..i有2个useState ..一个用于在更改textarea时更新状态，另一个用于更新下拉选择的值。我想知道我是否可以维护单个useState，并且每次表列中的任何更改都会触发单个回调函数并使用单个useState更新状态。我也不确定是要替换状态还是保留先前的状态（表中所有行）

<div>
<Table striped bordered hover>
<thead>
<tr>
<th>#</th>
<th>Text</th>
<th>Title</th>
<th>Data Property</th>
</tr>
</thead>
<tbody>
{data.map((item,index) => (
<tr key={index}>
<td>{item.id}</td>
<td>{item.color}</td>
<td>
<div className="userInput">
<InputGroup>
<Form.Control as="textarea" aria-label="With textarea" rows={1} value={newTitle.labelTitle} onChange={(e) => handleTitleChange(e)}/>
</InputGroup>
</div>
</td>
<td>
<Form.Group controlId="exampleForm.ControlSelect1">
<Form.Control as="select">
{dropDownData.map((data,index) => (
<option key={index} onChange = {(e)=>handleDataPropertyChange(e)}>{data}</option>
))}
</Form.Control>
</Form.Group>
</td>
</tr>
))}
</tbody>
</Table>
</div>

const [newTitle, setTitle] = useState(data);
    const [newDataProperty, setDataProperty] = useState(dropDownData);

    const handleTitleChange = (e) => {
        setTitle(e.target.value);   
    }

    const handleDataPropertyChange = (e) => {
        setDataProperty(e.target.textContent);
    }

使用react钩子为表行中的所有列值维护单个useState

0 个答案: