Как получить значения из нескольких Textareas в React

Question

У меня есть форма, которая имеет более 1 textarea (от 3 до точных).Проблема в том, что если я что-то наберу в 1 textarea, то другие textareas также будут заполнены и обновлены.И я не хочу этого.Я использую обработчик onChange, чтобы сделать их управляемыми компонентами, но они ведут себя не так, как ожидалось.Я посмотрел онлайн, но не смог найти решение!Как сделать так, чтобы они обновлялись по отдельности при изменении / типе?

React Textarea, компонент

const Textarea = ({ labelText, placeholder, value, name, onChange }) => {
  return (
    <div className="textarea-panel">
      <label>{labelText}</label>
      <textarea
        style={{ display: 'block' }}
        cols="60"
        rows="5"
        placeholder={placeholder}
        value={value}
        name={name}
        onChange={onChange}
      />
    </div>
  );
}

export default Textarea;

React Form, компонент

import Textbox from './Textbox';

export class Form extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: {
        career: '',
        experience: '',
        additionalInformation: '',
      },
    };

    this.handleTextareaChange = this.handleTextareaChange.bind(this);
  }

  handleTextareaChange(event) {
    this.setState({
      data: {
        [event.target.name]: event.target.value,
      },
    });
  }

  render() {
    return (
      <form>
        <ul>
          <li>
            <Textbox
              labelText="Write your career "
              value={this.state.data.career}
              placeholder="e.g. extra information"
              name="career"
              onChange={this.handleTextareaChange}
            />
            <span>{this.state.data.career}</span>
          </li>
          <li>
            <Textbox
              labelText="Write your experience"
              value={this.state.data.experience}
              placeholder="e.g. extra information"
              name="experience"
              onChange={this.handleTextareaChange}
            />
            <span>{this.state.data.experience}</span>
          </li>
          <li>
            <Textbox
              labelText="Additional information"
              value={this.state.data.additionalInformation}
              placeholder="e.g. extra information"
              name="additionalInformation"
              onChange={this.handleTextareaChange}
            />
            <span>{this.state.data.additionalInformation}</span>
          </li>
        </ul>
      </form>
    );
  }
}

export default Form;

Answer 1

Вы переопределяете все состояние новым ключом объекта данных.Каждый раз, когда вызывается обработчик onChange, все состояние переопределяется новым объектом данных с именем текущего текстового поля в качестве ключа.Вместо этого просто обновите специальный ключ на данных, как это

Попробуйте это здесь: Codesandbox

handleTextareaChange(event) {
  const { data } = this.state
  data[event.target.name] = event.target.value
  this.setState({
    data
  });
}

Надеюсь, это поможет!