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

Question

В настоящее время я использую node.js (для хранения базы данных с использованием mySQL) и response.js (для отображения всех текстовых областей)

Я не слишком уверен, как это сделать, если у меня есть цикло текстовых областях, полученных из базы данных, как я смогу редактировать значение внутри текстовой области и получить это значение, чтобы обновить его в моей базе данных, когда я нажму кнопку «Сохранить данные».

const WorkInProgressHLEDevDays = () =>{
return (
<tr>
<th> TEXTAREAs </th>
{this.state.WIPHLEsData.map((HLEDevDayTextAreas, i) => (
    <td key={i}>
    <textarea className="HLEDevDays"  onChange={this.handleChange} value={HLEDevDayTextAreas.HLEDevDays} spellcheck="false">

    </textarea>
    </td>

))}


</tr>

)}

Answer 1

Существует множество способов реализовать это.Самый простой - сделать ваши компоненты неконтролируемыми, хотя это наименее рекомендуется в соответствии с Facebook:

{this.state.WIPHLEsData.map((HLEDevDayTextAreas, i) => (
  <td key={i}>
    <textarea
      name={`HLEDevDays_${i}`}
      className="HLEDevDays"
      defaultValue={HLEDevDayTextAreas.HLEDevDays}
      spellcheck="false"
    />
  </td>
)}

Как следует из названия, React не управляет состоянием каждой текстовой области, но позволяет вашему браузеру это делать.через обычные мутации DOM.Если вы оберните все это в form, вы сможете прочитать значения на своем бэкэнде (через атрибут name).