Question

＆lt; p＆gt;我的应用程序的目的是从api-url获取一些消息（mes）并为每条消息发送answer（subFunction方法）。之后该消息将从'mes'数组中删除。 'Message'是一个父组件，负责通过map方法获取数据（componentDidMount事件）和呈现消息。 'MessageItem'负责从'textarea'获取价值 - 答案的主体。但是我不能将this.state.value（textarea.value）从MessageItem转移到父组件。如果我在子组件中放置'subFunction'，我无法更改this.state.mes＆lt; / p＆gt; ＆lt; pre＆gt;＆lt; code＆gt;导入来自'react'的React 从'react-dom'导入ReactDOM const url =“api-url”; class MessageItem扩展React.Component { 构造函数（道具）{ 超级（道具）; this.state = { 值：''， }; }; handleChange（event）{ this.setState（{value：event.target.value}）; } render（）{ 回来（＆lt; div className =“message_wrap”key = {this.props.message_id}＆gt; ＆lt; div className =“message_body”＆gt; {} this.props.message_body ＆LT; / DIV＆GT; ＆lt; div className =“input-field col s12”＆gt; ＆lt; textarea value = {this.state.value} onChange = {this.handleChange.bind（this）} /＆gt; ＆lt; label htmlFor =“textarea1”＆gt; Ответ ＆LT; /标签＆gt; ＆lt; button onClick = {this.props.onClick}＆gt; Отправить ＆LT; /按钮＆GT; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ）; } } class Message扩展了React.Component { 构造函数（道具）{ 超级（道具）; this.state = { MES：[]， }; }; componentDidMount（）{ 取（URL）。然后（功能（响应）{ 回复 }）。then（function（response）{ return response.json（） }）然后（（数据）=＆GT; { this.setState（{MES：数据}） }） } subFunction（user_id，value）{ / *此方法必须发送带有用户ID和textarea值的答案* / } render（）{ 回来（＆LT; DIV＆GT; {this.state.mes.map（（指数）=＆GT; （＆LT; MesItem 关键= {} index.message_id MESSAGE_BODY = {index.message_body} onClick = {this.subFunction.bind（this，index.user_id）} /＆GT; ）） } ＆LT; / DIV＆GT; ）; } } ReactDOM.render（＆lt; Message /＆gt ;, document.getElementById（'container'））; ＆LT; /代码＆GT;＆LT; /预＆GT;

Answer 1

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

像这样：

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

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

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

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

2 个答案: