поддерживать единственное useState для всех значений столбца в строке таблицы, используя реакционные хуки - PullRequest
Новая
       3

поддерживать единственное useState для всех значений столбца в строке таблицы, используя реакционные хуки

0 голосов
/ 16 апреля 2020

У меня есть таблица реагирования bootstrap, в которой есть 4 значения столбца. я ищу способ с использованием перехватчиков реакции useState где - я могу поддерживать состояние всех значений столбца в одном и том же объекте состояния, и всякий раз, когда состояние любого из значений столбца изменяется, обновляется вся строка.

I Я очень плохо знаком с reactjs и реагирую на хуки, пожалуйста, дайте мне знать, если это можно сделать с помощью любого другого реактивного хука. спасибо!

В приведенном ниже коде ... у меня есть 2 useState..one для обновления состояния при изменении текстовой области, другой для обновления выпадающего выбранного значения. Я хочу знать, могу ли я поддерживать единственный 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);
    }
...