道具在提交表格時不會通過

我試圖將我的輸入表單的值傳遞給我的AppMap組件，它將地圖中心設置爲prop city。它在我對searchValue進行硬編碼時起作用，但是當我提交表單時，它不會將狀態作爲道具傳遞給AppMap組件。有誰知道我做錯了什麼。提前致謝。道具在提交表格時不會通過

class Map extends Component{ 
    constructor(){ 
     super() 
     this.state = { 
     value: ' ', 
     searchValue: "London" 
     }; 

     this.handleChange = this.handleChange.bind(this); 
     this.handleSubmit = this.handleSubmit.bind(this); 
    } 



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

handleSubmit(event) { 
    const value = this.state.value 
     event.preventDefault(); 
     this.setState ({ 
     searchValue: value 
     }) 
} 


    render(){ 
     return(
      <div className='map'> 
       <h1>The Map</h1> 

        <AppMap city={this.state.searchValue} /> 

        <Grid> 
        <Row className="show-grid"> 
         <FormGroup value={this.state.value} onChange={this.handleChange} name='cardHeading' controlId="formControlsTextarea"> 
          <Col xs={8} md={8}> 
          <FormControl type="text" placeholder="title" /> 
          </Col> 
          <Col xs={4} md={4}> 
          <Button onClick={this.handleSubmit} type="submit">Submit</Button> 
          </Col> 
         </FormGroup> 
        </Row> 
        </Grid> 
      </div> 
     ) 
     } 
    }

出口默認地圖

來源

2017-10-04 HarryTgerman

你已經檢查的Map的state和props的AppMap更新正確？例如使用反應開發工具。如果是這樣，AppMap組件可能是問題所在。

首先，我會將FormGroup組件標記爲<form onSubmit={this.handleSubmit}></form>標記，並從Button組件中刪除onClick={this.handleSubmit}組件。（請在https://reactjs.org/docs/forms.html處查看React Form示例）。

然後，如果state和props更新正確的，但AppMap組件的中心不工作，你可能需要中心自己使用的AppMapupdate lifecycle methods一個地圖。

來源

2017-10-04 15:01:13

謝謝你，我安裝了反應，開發工具，然後我能夠看到，該組件更新它的狀態，但什麼都沒有改變，因爲我在錯誤的生命週期方法中編寫了我的AppMap組件的獲取函數 – HarryTgerman

如果這有幫助，可以將其設置爲有用的答案嗎？ –

的handleChange功能應該是在FormControl不在FormGroup

<FormControl type="text" value={this.state.value} onChange={this.handleChange} name='cardHeading' placeholder="title" />

來源

2017-10-04 15:28:04

道具在提交表格時不會通過

回答

相關問題