javascript - 提交表单时 props 未通过

Question

我正在尝试将输入表单的值传递给我的 AppMap 组件，它将 map 以 prop city 为中心。当我对 searchValue 的状态进行硬编码时，它可以工作，但是当我提交表单时，它不会将状态作为 Prop 传递给 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>
          )
        }
    }

导出默认 map

Answer 1

您是否已经检查过 state 是否的Map和 props的AppMap更新正确吗？例如使用 React 开发工具。如果是这样，那么AppMap组件可能就是问题所在。

首先，我将包裹 FormGroup具有 <form onSubmit={this.handleSubmit}></form> 的组件标记并删除 onClick={this.handleSubmit}来自Button成分。 (查看 react 表单示例 https://reactjs.org/docs/forms.html )。

然后，如果state和props更新正确，但 AppMap 居中组件不起作用，您可能必须使用 AppMap 之一自行将 map 居中update lifecycle methods .