如何从子组件中获取父组件中的 <textarea> 值？

Question

我的应用程序的目的是从 api-url 获取一些消息（mes）数组并为每条消息发送答案（subFunction 方法）。之后该消息将从“mes”数组中删除。 'Message' 是一个父组件，负责通过 map 方法获取数据（componentDidMount 事件）和渲染消息。 'MessageItem' 负责从'textarea' 获取价值 - 答案的主体。但我无法将 this.state.value(textarea.value) 从 MessageItem 传输到父组件。如果我将 'subFunction' 放在子组件中，我无法更改 this.state.mes

import React from 'react'
import ReactDOM from 'react-dom'
const url="api-url";

class MessageItem extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
         value:'',
      };
    };

 handleChange(event) {
        this.setState({value: event.target.value});
     }
render() {
return (
  <div className="message_wrap" key={this.props.message_id}>
                                <div className="message_body">
                                       {this.props.message_body}
                                </div>            
                                 <div className="input-field col s12">
                                     <textarea value={this.state.value} onChange={this.handleChange.bind(this)}/>
                                     <label htmlFor="textarea1">
                                         Ответ
                                     </label>
                                <button onClick={this.props.onClick}>
                                    Отправить
                                </button>
                        </div>
                    </div>
    );
  }
}
class Message extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         mes:[],
      };
    };
   componentDidMount(){
    fetch(url).then(function(response){
        return response
    }).then(function (response) {
        return response.json()
    }).then((data)=>{
        this.setState({mes:data})
    })
    }
    subFunction(user_id, value) {
   /*This method have to send answer with user id and textarea value*/
    }
    render() {
        return (
            <div>
            {this.state.mes.map((index)=>
                (
                    <MesItem
                             key={index.message_id}
                             message_body={index.message_body}
                             onClick={this.subFunction.bind(this, index.user_id)}
                    />

                )
          )
            }
        </div>
        );
    }
}
ReactDOM.render(<Message/>, document.getElementById('container'));

Answer 1

您正在将 function 从父组件传递给子组件，调用该函数将值从子组件传递给父组件。

像这样：

<button onClick={() => this.props.onClick(this.state.value)}>
     Отправить
</button>

现在在subFunction 内执行console.log，它将打印正确的值：

subFunction(user_id, value) {
   console.log(user_id, value)
}

Answer 2

将ref 分配给子组件中的textarea 和MesItem，然后您可以获取类似的值

class MessageItem extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
         value:'',
      };
      mesItem = [];
    };

 handleChange(event) {
        this.setState({value: event.target.value});
     }
render() {
return (
  <div className="message_wrap" key={this.props.message_id}>
                                <div className="message_body">
                                       {this.props.message_body}
                                </div>            
                                 <div className="input-field col s12">
                                     <textarea value={this.state.value} ref={(ta) => {this.text = ta}}onChange={this.handleChange.bind(this)}/>
                                     <label htmlFor="textarea1">
                                         Ответ
                                     </label>
                                <button onClick={this.props.onClick}>
                                    Отправить
                                </button>
                        </div>
                    </div>
    );
  }
}
class Message extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         mes:[],
      };
    };
   componentDidMount(){
    fetch(url).then(function(response){
        return response
    }).then(function (response) {
        return response.json()
    }).then((data)=>{
        this.setState({mes:data})
    })
    }
    subFunction(user_id, i) {
           console.log(this.mesItem[i].text.value)
    }
    render() {
        return (
            <div>
            {this.state.mes.map((index, i)=>
                (
                    <MesItem
                             ref = {(ip) => {this.mesItem[i] = ip}}
                             key={index.message_id}
                             message_body={index.message_body}
                             onClick={this.subFunction.bind(this, index.user_id , i)}
                    />

                )
          )
            }
        </div>
        );
    }
}
ReactDOM.render(<Message/>, document.getElementById('container'));