Reactjs 我怎样才能得到<；textarea>；子组件中的父组件中的值？

我的应用程序的目的是从api url获取一些消息数组（mes），并为每条消息发送应答（子函数方法）。之后，消息将从“mes”数组中删除Message'是一个父组件，负责获取数据（componentDidMount事件）并通过map方法呈现消息MessageItem'负责从'textarea'（答案主体）获取值。但我无法将这个.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'));

从“React”导入React
从“react dom”导入react dom
const url=“api url”；
类MessageItem扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：“”，
};
};
手变（活动）{
this.setState（{value:event.target.value}）；
}
render（）{
返回(
{this.props.message_body}
Ответ
Отправить
);
}
}
类消息扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
mes:[]，
};
};
componentDidMount（）{
获取（url）。然后（函数（响应）{
返回响应
}).然后（功能（响应）{
返回response.json（）
})。然后（（数据）=>{
this.setState（{mes:data}）
})
}
子功能（用户id、值）{
/*此方法必须发送带有用户id和textarea值的答案*/
}
render（）{
返回(
{this.state.mes.map（（索引）=>
(
)
)
}
);
}
}
ReactDOM.render（，document.getElementById（'container'））；

如果要将

函数从父组件传递给子组件，请调用该函数将值从子组件传递给父组件

像这样：

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

将
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'));

class MessageItem扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：“”，
};
mesItem=[]；
};
手变（活动）{
this.setState（{value:event.target.value}）；
}
render（）{
返回(
{this.props.message_body}
{this.text=ta}}onChange={this.handleChange.bind（this）}/>
Ответ
Отправить
);
}
}
类消息扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
mes:[]，
};
};
componentDidMount（）{
获取（url）。然后（函数（响应）{
返回响应
}).然后（功能（响应）{
返回response.json（）
})。然后（（数据）=>{
this.setState（{mes:data}）
})
}
子功能（用户id，i）{
console.log（this.mesItem[i].text.value）
}
render（）{
返回(
{this.state.mes.map（（索引，i）=>
(
{this.mesItem[i]=ip}
key={index.message_id}
message_body={index.message_body}
onClick={this.subFunction.bind（this，index.user_id，i）}
/>
)
)
}
);
}
}
ReactDOM.render（，document.getElementById（'container'））；
Uncaught（在promise中）TypeError:无法设置未定义ref:ip=>{this.mesItem[i]=ip的属性“0”；初始化mesItem我认为，正如我在“mesItem”中看到的，它必须是ref={this.props.inputRef}并且在父级：inputRef={（ip）=>{this.mesItem[i]=ip}.但我对未定义的值也有同样的问题..我不明白如何在onClick={this.subFunction.bind（this，index.user_id）}中传递this.state.value父组件的太棒了！这是工作！你能解释一下怎么做吗？我会非常感谢你！原因是，在每个onclick函数中，你都绑定了用户id，以及你从子组件传递的值，所以每次调用该函数时，它都会得到两个参数，用户id和值，
this.props.onclick（this.state.value）
基本上会调用父函数，并传递输入字段的值：）
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'));