如何在React中从多个Textareas获取值

Question

我有一个表格，其中有1个以上的textarea（精确到3个）。问题是，如果我在1 textarea中键入内容，则其他textareas也将被填充和更新。我不想要那个。我正在使用onChange处理程序来使它们成为受控组件，但它们的行为不符合预期。我已经上网了，但找不到解决方案！如何使它们分别根据更改/类型进行更新？

反应文本区域组件

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;

反应形式组件

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
  });
}

希望这会有所帮助！