javascript - 提交表格时 Prop 不通过

我正在尝试将输入表单的值传递给AppMap组件，它将Map放在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>
          )
        }
    }

导出默认地图

最佳答案

您是否已检查state的Map和props的AppMap是否正确更新？例如，使用react dev-tools。如果是这样，那么AppMap组件可能就是问题所在。

首先，我将使用FormGroup标签包装<form onSubmit={this.handleSubmit}></form>组件，并从onClick={this.handleSubmit}组件中删除Button。 （在https://reactjs.org/docs/forms.html上查看React Form示例）。

然后，如果state和props正确更新，但是AppMap组件的居中不起作用，则可能必须使用AppMap update lifecycle methods之一使地图居中。