從輸入中獲取值並在按鈕上使用

我正在使用input元素和button元素創建組件。例如，我需要輸入value並使用按鈕。我怎樣才能做到這一點？這裏是我的代碼：從輸入中獲取值並在按鈕上使用

var InputSearch = React.createClass({ 
    getInitialState: function() { 
    return { 
     value: 'pics' 
    } 
    }, 

    handleChange: function() { 
    this.setState({ 
     value: event.target.value 
    }); 
    }, 

    render: function() { 
    return (
     <input type="text" value={this.state.value} onChange={this.handleChange} /> 
    ) 
    } 
}); 


var ButtonSearch = React.createClass({ 
    handleClick: function(event) { 
    console.log(this.state.value); // here's go the input value 
    }, 

    render: function() { 
    return (
     <button onClick={this.handleClick}>GO! </button> 
    ) 
    } 
}); 

var Search = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <InputSearch /> 
     <ButtonSearch /> 
     </div> 
    ) 
    } 
}); 

React.render(
    <Search />, 
    document.getElementById('result') 
);

來源

2015-09-24 Fernando

傳遞文本這種情況下，有沒有你爲什麼會具有輸入和按鍵作爲兩個獨立的部件的具體原因是什麼？如果您將它們放在一個組件中，您可以獲得該值，因爲兩者都是同一組件的一部分。 – shashi

這裏的一個問題是，你打破了一個很好的規則 - 分離聰明和愚蠢的組件。 https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

做到這一點的方法是讓持有所有國家和兒童的功能，並通過了所有的下來作爲道具父組件...

下面我們通過處理函數從父母到孩子，所以輸入不關心事件發生的變化，它只是需要知道它有一個叫做onChange的道具，它是一個函數，它會調用它。

父（SearchContainer）處理的所有功能和向下傳遞變更後的狀態既按鈕和輸入...

希望幫助

丹

來源

2015-09-25 06:29:31 danbahrami

你在你的handleChange留出了大事。

handleChange: function(event) { 
    this.setState({ 
    value: event.target.value 
    }); 
},

來源

2015-09-24 21:44:12

的主要架構父母的孩子/主奴隸的原則就是反應。

如果您想在組件之間傳遞值，您必須在兩者之間創建關係。

例如像

您創建一些默認狀態您的主機部件。

var MyMasterComponent = React.createClass({ 
getInitialState: function(){ 
    ... 
}, 
render: function(){ 
    return(
    <ChilComponent1 textiwanttopass={this.state.text} /> 
); 
} 
});

使用該方法，您正在調用主組件內其他組件的呈現。這樣你可以將狀態的值傳遞給另一個組件。

在，您可以訪問this.props.textiwanttopass

來源

2015-09-25 06:53:25

從輸入中獲取值並在按鈕上使用

回答

相關問題