如何获取组件的输入值并将其渲染到另一个组件中并返回

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