<textarea> 값을 하위 구성 요소의 부모 구성 요소에 포함시키는 방법은 무엇입니까?

Question

내 응용 프로그램의 목표는 api-url에서 메시지 배열 (mes)을 가져 와서 모든 메시지에 대한 응답 (subFunction 메서드)을 보내는 것입니다. 해당 메시지가 'mes'배열에서 삭제됩니다. 'Message'는 데이터 가져 오기 (componentDidMount 이벤트) 및지도 메소드를 통한 메시지 렌더링을 담당하는 상위 구성 요소입니다. 'MessageItem'은 'textarea'에서 값을 가져 오는 역할을 담당합니다. 그러나 MessageItem에서 부모 구성 요소로 this.state.value (textarea.value)를 전송할 수는 없습니다. 나는 아이 컴퍼넌트에 '하위 기능'을 배치하면, 나는, 당신은 아이에게 부모 구성 요소에서 function를 전달하는 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

을 변경 부모에게 아이에서 값을 전달하는 기능을 호출 할 수 없습니다. 지금은 적절한 값으로 인쇄됩니다 console.logsubFunction 안에 할

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

:

이 같이

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

Answer 2

자식 구성 요소와 MesItem에 textarea에 ref을 지정하고 다음을 수행 할 수 있습니다 값을 가져 오십시오.

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