React.js使用Stripe更改狀態：根據組件更改數量狀態

Question

我正在使用React。上的Stripe開發支付系統。 CheckoutForm有兩個父組件：每個組件都應包含用於其他訂閱/定價計划的表單。 因此，我想更改金額對象（在CheckoutForm中創建）的狀態，具體取決於它是哪個父組件->，然后將其發送到服務器以完成付款。 例如：Parent1：金額：2000； Parent2：5000。

換句話說，我想將其從子級傳遞給父級，因此父級需要向子級提供設置父級狀態的函數/方法。 然后，我需要在子組件中調用該函數（我認為呢？）。

任何幫助將非常感激！ 讓我知道您是否需要更多代碼段。

 class CheckoutForm extends Component { constructor(props) { super(props); this.state = { complete: false, referrer: '', email: '', amount: '', }; this.submit = this.submit.bind(this); } componentDidMount() { console.log(this.props); let referrer = this.props.match.params.referrer; // url - added route to index.js if (referrer) { console.log(referrer); this.setState({ referrer, }); } } // user clicked submit submit(ev) { ev.preventDefault(); // prevent default submission and refreshing the page this.props.stripe.createToken() // which elements to tokenize .then(response => { console.log('Received Stripe token:', response.token); axios.post('http://10.250.57.37:8000/subscriptions/codes/pay/', { token: response.token, amount: this.state.amount, email: this.state.email, referrer: this.state.referrer, }, { 'Content-Type': 'application/json', // header } ) .then(response => { console.log(response); }); }) .catch(error => { console.log(error); }); } render() { if (this.state.complete) return <p>Purchase Complete!</p>; return ( <div className="checkout-form"> <PrimeHeading heading={this.props.heading} subheading={this.props.subheading} /> <p>Would you like to complete the purchase?</p> <form onSubmit={this.submit} style={{ minHeight: 300, }}> <label> Email <input id="email" name="email" type="email" placeholder="Enter your email" required onChange={this._handleEmailChange.bind(this)} value={this.state.email} /> </label> {/* <label> Referral <input id="referrer" name="referrer" type="text" placeholder="Enter your friends' usernames" required /> </label> */} <CheckoutCardSection /> <Button // label="Pay" {this.state.amount} "DKK" onClick={this.submit} type="button" size="medium" backgroundColor="#43ddb1" color="white" noShadow /> </form> {this.state.code && <div>Your activation code is: {this.state.code} and it is valid for {this.state.subscription_days} days.</div>} </div> ); } _handleEmailChange(event) { let email = event.target.value; this.setState({ email, }); } 

Answer 1

如果我不明白您的理解，那么您想重用CheckoutForm組件。 如您所想，您可以將處理函數傳遞給CheckoutForm來更新父組件。 一個非常基本的例子：

 class CheckoutForm extends React.Component { state = { amount: "", }; handleChange = e => this.setState( { amount: e.target.value } ); handleSubmit = ( e ) => { e.preventDefault(); this.props.handleAmount( this.state.amount ); }; render() { return ( <div> <form onSubmit={this.handleSubmit}> <input onChange={this.handleChange} /> <button>Send</button> </form> </div> ); } } class Parent1 extends React.Component { state = { amount: "", }; handleAmount = amount => this.setState( { amount } ); render() { return ( <div> <CheckoutForm handleAmount={this.handleAmount} /> <p>This is Parent1 component</p> My amount is: {this.state.amount} </div> ); } } class Parent2 extends React.Component { state = { amount: "", }; handleAmount = amount => this.setState( { amount } ); render() { return ( <div> <CheckoutForm handleAmount={this.handleAmount} /> <p>This is Parent2 component</p> My amount is: {this.state.amount} </div> ); } } class App extends React.Component { state = { amount: "", }; render() { return ( <div> <Parent1 /> <hr /> <Parent2 /> </div> ); } } ReactDOM.render( <App />, document.getElementById("root") ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>