如何在React中从父组件获取子组件textarea的输入值

我来帮你搞定这个问题，在React里获取子组件textarea的值有两种常用的方式，我分别给你详细讲讲：

一、受控组件（React推荐方案） #

这种方式让React完全控制textarea的状态，数据流转更清晰，也更符合React的设计理念。

实现步骤： #

• 在App组件中维护一个状态，用来存储所有Paragraph组件的输入值（用对象存储，key对应段落id，value对应输入内容）
• 给Paragraph组件传递两个props：value（当前段落的输入值）和onInputChange（用来更新App状态的回调）
• 修改Paragraph组件，让textarea绑定value和onChange事件

修改后的Paragraph组件代码：

class Paragraph extends React.Component {
  render() {
    let style = { height: "150px", marginBottom: "10px" };
    return (
      <div className="paragraph" id={this.props.id}>
        <div className="row">
          <div className="col-sm-11">
            <textarea 
              className="form-control" 
              name={"paragraph" + this.props.id} 
              placeholder="Put Paragraph Here" 
              style={style} 
              required
              value={this.props.value}
              onChange={(e) => this.props.onInputChange(this.props.id, e.target.value)}
            ></textarea>
          </div>
          <div className="col-sm-1">
            <div className="btn btn-danger del-rotate" onClick={() => this.props.remove(this.props.id)} >
              &times;
            </div>
          </div>
        </div>
      </div>
    );
  }
}

App组件中的核心代码示例：

class App extends React.Component {
  constructor(props) {
    super(props);
    // 初始化状态，存储各个段落的输入值
    this.state = {
      paragraphs: [1, 2], // 假设你有初始的段落id列表
      paragraphValues: {}
    };
  }

  // 处理输入变化的回调
  handleInputChange = (paragraphId, value) => {
    this.setState(prevState => ({
      paragraphValues: {
        ...prevState.paragraphValues,
        [paragraphId]: value
      }
    }));
  }

  // 移除段落的方法，同时也要删除对应的值
  handleRemoveParagraph = (paragraphId) => {
    this.setState(prevState => {
      const newParagraphs = prevState.paragraphs.filter(id => id !== paragraphId);
      const newValues = {...prevState.paragraphValues};
      delete newValues[paragraphId];
      return { 
        paragraphs: newParagraphs,
        paragraphValues: newValues 
      };
    });
  }

  // 比如在某个按钮点击时获取所有值
  handleSubmit = () => {
    console.log("所有段落的输入值：", this.state.paragraphValues);
    // 这里可以做提交等后续操作
  }

  render() {
    return (
      <div>
        {this.state.paragraphs.map(id => (
          <Paragraph 
            key={id} 
            id={id} 
            remove={this.handleRemoveParagraph}
            value={this.state.paragraphValues[id] || ''}
            onInputChange={this.handleInputChange}
          />
        ))}
        <button onClick={this.handleSubmit}>获取所有输入值</button>
      </div>
    );
  }
}

二、非受控组件（适合简单场景） #

如果你的场景比较简单，也可以用ref直接访问DOM元素的value属性。

实现步骤： #

• 在App组件中维护一个ref集合，用来存储每个Paragraph组件的textarea ref
• 给Paragraph组件传递一个回调ref，用来绑定到textarea上
• 在需要获取值的时候，通过ref访问textarea的value

修改后的Paragraph组件代码：

class Paragraph extends React.Component {
  render() {
    let style = { height: "150px", marginBottom: "10px" };
    return (
      <div className="paragraph" id={this.props.id}>
        <div className="row">
          <div className="col-sm-11">
            <textarea 
              className="form-control" 
              name={"paragraph" + this.props.id} 
              placeholder="Put Paragraph Here" 
              style={style} 
              required
              ref={this.props.textareaRef}
            ></textarea>
          </div>
          <div className="col-sm-1">
            <div className="btn btn-danger del-rotate" onClick={() => this.props.remove(this.props.id)} >
              &times;
            </div>
          </div>
        </div>
      </div>
    );
  }
}

App组件中的核心代码示例：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      paragraphs: [1, 2] // 假设初始段落id列表
    };
    // 用对象存储每个textarea的ref
    this.textareaRefs = {};
  }

  // 给每个Paragraph传递ref的回调
  getTextareaRef = (paragraphId) => (element) => {
    this.textareaRefs[paragraphId] = element;
  }

  handleRemoveParagraph = (paragraphId) => {
    this.setState(prevState => ({
      paragraphs: prevState.paragraphs.filter(id => id !== paragraphId)
    }));
    // 同时删除对应的ref
    delete this.textareaRefs[paragraphId];
  }

  handleGetValues = () => {
    // 遍历ref集合获取每个textarea的值
    const values = {};
    Object.keys(this.textareaRefs).forEach(id => {
      values[id] = this.textareaRefs[id]?.value || '';
    });
    console.log("所有段落的输入值：", values);
  }

  render() {
    return (
      <div>
        {this.state.paragraphs.map(id => (
          <Paragraph 
            key={id} 
            id={id} 
            remove={this.handleRemoveParagraph}
            textareaRef={this.getTextareaRef(id)}
          />
        ))}
        <button onClick={this.handleGetValues}>获取所有输入值</button>
      </div>
    );
  }
}

总结：优先推荐使用受控组件的方式，因为它能让数据和视图保持同步，便于后续的状态管理和逻辑扩展；非受控组件适合快速实现简单场景，但状态管理相对松散。

内容的提问来源于stack exchange，提问作者Papaya