0

我正在尝试将输入表单的值传递给我的 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>
          )
        }
    }

导出默认地图

4

2 回答 2

1

您是否已经检查过stateofMap和propsofAppMap更新是否正确？例如使用反应开发工具。如果是这样，那么AppMap组件可能就是问题所在。

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

然后，如果state和props更新正确，但AppMap组件的居中不起作用，您可能必须使用AppMap 更新生命周期方法之一自己将地图居中。

于 2017-10-04T15:01:13.540 回答
0

handleChange 函数应该在 FormControl 中而不是在 FormGroup 中

<FormControl type="text" value={this.state.value} onChange={this.handleChange} name='cardHeading' placeholder="title" />
于 2017-10-04T15:28:04.983 回答