如何返回另一個類的函數中發生反應，終極版

Question

... 
 

 
class AddForm extends Component { 
 
    constructor() { 
 
    super(); 
 
    } 
 
    
 
    getValue() { 
 
    let refsValue = [{ 
 
    \t price: this.refs.price.value, 
 
    \t remarks: this.refs.remarks.value 
 
    }]; 
 

 
    return refsValue; 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <div> 
 
     <input type="number" name="price" ref="price" /> 
 
     <input type="text" name="remarks" ref="remarks" /> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
class BankForm extends Component { 
 
    constructor() { 
 
    super(); 
 
    
 
    this.onSubmit = this.onSubmit.bind(this); 
 
    } 
 
    
 
    onSubmit() { 
 
    console.log(getValue()); 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <div> 
 
     <button onClick={ this.onSubmit }>Submit</button> 
 
     </div> 
 
    ); 
 
    } 
 

 
...

如何從的getValue返回的onsubmit？

getValue() { ... return refsValue; } -> onSubmit() { console.log(getValue()) } 

請更正onSubmit的內容！

對不起我英語不好

Answer 1

這些看起來像兩個單獨的類。他們根本沒有聯繫，所以你將無法獲得任何價值。

您需要重構並渲染BankForm中的AddForm。我建議讓AddForm作爲無狀態組件，並將onSubmit作爲道具通過getValues（或將getValues的內容放入onSubmit）。

class BankForm extends Component { 
    constructor() { 
    super(); 
    this.onSubmit = this.onSubmit.bind(this); 
    } 

    onSubmit(e) { 
    e.preventDefault(); 
    console.log(e.target.price.value); 
    } 

    render() { 
     return (
     <AddForm onSubmit={this.onSubmit} /> 
    ); 
    } 
} 

function AddForm(props) { 
    return (
     <div> 
     <form onSubmit={props.onSubmit}> 
      <input type="number" name="price" /> 
      <input type="text" name="remarks" /> 
      <button type="submit">Submit</button> 
     </form> 
     </div> 
    ); 
} 

https://jsfiddle.net/mb3m0jgd/1/