如何獲取組件的輸入值並將其渲染到另一個組件中並返回

Question

我有兩個組件：InputValues和AddProject。我在AddProject中使用表格標籤，並在AddProject中使用InputValues組件。點擊提交按鈕，我想獲得handleSubmit()函數中的文本框值。我怎樣才能做到這一點？

export class InputValues extends Component { 
    updateText() { 
    this.setState(
     { 
     title: this.refs.title.value 
     }, 
     function() { 
     console.log(this.state); 
     } 
    ); 
    } 
    render() { 
    return (
     <div> 
     <input type="text" ref="title" onChange={this.updateText.bind(this)} /> 
     </div> 
    ); 
    } 
} 

class AddProject extends Component { 
    constructor() { 
    super(); 
    this.state = { title: '' }; 
    } 

    handleSubmit(e) { 
    this.setState(
     { 
     title: this.refs.title.value 
     }, 
     function() { 
     console.log(this.state); 
     } 
    ); 
    e.preventDefault(); 
    } 
    render() { 
    return (
     <div> 
     <form onSubmit={this.handleSubmit.bind(this)}> 
      <InputValues /> 
      <input type="submit" value="Submit" /> 
     </form> 
     </div> 
    ); 
    } 
} 

Answer 1

我會做的第一件事就是將您的InputValues更改爲「純功能組件」。由於您已經在管理父組件中的狀態（標題），因此這是一個小小的清理。我們將放置一個佔位符以允許父級處理更改。請注意，該值也是從道具中設置的，這意味着父級控制着輸入的每個方面：它實際上只是一個「啞」UI元素。

function InputValues(props) { 
    return (
    <div> 
     <input type="text" value={props.value} onChange={props.onInputChange} /> 
    </div> 
); 
} 

然後讓父組件上的處理程序，並有訪問您onsubmit狀態。有幾件事要注意：我們在構造函數中綁定this爲handleInputChange，以便我們可以訪問this.setState。我們可以通過e.target.value獲得新的價值。這幾乎與docs所經歷的完全相同。您可以在提交處理程序中訪問this.state.title以檢查您想要檢查的任何內容。

class AddProject extends Component { 
    constructor() { 
    super(); 
    this.state = { title: '' }; 
    this.handleInputChange = this.handleInputChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleInputChange(e) { 
    this.setState(
     { 
     title: e.target.value 
     }, 
     function() { 
     console.log(this.state); 
     } 
    ); 
    } 

    handleSubmit(e) { 
    e.preventDefault(); 
    // validate and do whatever is appropriate here 
    if (this.state.title === "Expected Title") { 
     return true; 
    } 

    return false; 
    } 
    render() { 
    return (
     <div> 
     <form onSubmit={this.handleSubmit}> 
      <InputValues value={this.state.title} onInputChange={this.handleInputChange}/> 
      <input type="submit" value="Submit" /> 
     </form> 
     </div> 
    ); 
    } 
}