綁定來自父級的多個反應組件

我剛剛開始使用React，並對某事感到困惑。比方說，我有一個登錄控制器視圖（智能組件），然後是一個LoginForm視圖（啞元組件），並且在LoginForm中，我創建了自定義組件來處理此頁面上的所有輸入。綁定來自父級的多個反應組件

class TextInput extends React.Component { 
    render() { 
    return (
     <input type="text" 
      name={this.props.name} 
      className="form-control" 
      placeholder={this.props.placeholder} 
      ref={this.props.name} 
      onChange={this.props.onChange} 
      value={this.props.value} /> 
    ); 
    } 
} 

class LoginForm extends React.Component { 
    render() { 
    return (
     <TextInput 
     name="username" 
     placeholder="Username" 
     onChange={this.props.onChange} 
     value={this.props.username} /> 
     <TextInput 
     name="address" 
     placeholder="Address" 
     onChange={this.props.onChange} 
     value={this.props.address} /> 
    ); 
    } 
}

我然後不知道如何在我的最高級別登錄控制器視圖的渲染功能，當我創建

如何讓不同的被稱爲對不同輸入？因爲我的頂級組件將屬性設置爲正確的？由於最下面的組件需要一個onChange屬性，當我傳遞onChange時，從頂層開始，是不是所有的TextInputs都會調用相同的onChange方法而不是兩個單獨的方法？

來源

2017-03-08 Crystal

是的，調用相同的函數。參數有什麼變化。這只是老派的JS。作爲第一個參數，input將把change事件傳遞給onChange函數。

您將需要在一個組件或另一個組件中處理它。

onChange(e){ 
    var formKeyVal = {}; 
    formKeyVal[e.target.name] = e.target.value; 
    this.setState(formKeyVal); 
}

來源

2017-03-08 06:50:56

由於refs我們可以設置不同的參照各低級別的元素。無論如何，愚蠢或聰明。您的高層次的組件包含：

`handleText(){ 
      this.setState({ 
       text: ReactDOM.findDOMNode(this.refs.yourElement).value 
      }) 
     }`

你低級別的組件包含： <input type="text" ref="yourElement" onChange={this.props.textInput} />

這個例子給你一些線索。注意細節：選擇器：refs 但是元素：ref。不時需要兩個等級refs。在這種情況下，它將是 text: ReactDOM.findDOMNode(this.refs.yourComponent.refs.yourElement).value

來源

2017-03-08 06:55:43

綁定來自父級的多個反應組件

回答

相關問題