提交表单时道具不会通过

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 和 AppMap 的 props 是否正确更新？例如使用 React 开发工具。如果是这样，那么 AppMap 组件可能就是问题所在。

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

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

Answer 2

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

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

提交表单时道具不会通过

props dont get passed when submitting Form

javascript

google-maps

ecmascript-6

reactjs

react-google-maps