フォームを送信するときに小道具が渡されない

Question

私の入力フォームの値を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> 
     ) 
     } 
    } 

輸出デフォルトの地図

Answer 1

正しくMapのstateとpropsAppMapの更新場合は、すでにチェックしましたか？たとえば、反応開発ツールを使用します。その場合は、AppMapコンポーネントが問題の可能性があります。

まず、FormGroupコンポーネントを<form onSubmit={this.handleSubmit}></form>タグで囲み、ButtonコンポーネントからonClick={this.handleSubmit}を削除します。 （https://reactjs.org/docs/forms.htmlのReact Formの例を確認してください）。正しくstateとprops更新、しかしAppMapコンポーネントのセンタリングが動作しない場合

はその後、あなた自身が AppMap update lifecycle methodsのいずれかを使用してマップを中央に持っているかもしれません。

Answer 2

handleChange機能はありませんFormGroup

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