Question

我正在尝试创建一个具有3个选择的选择：

在表单页面中，我有：

      <Form>
          <Form.Row>
            <Form.Group as={Col} controlId="formGridState">
              <Form.Label>Choose One</Form.Label>
              <Form.Control as="select" defaultValue="" onChange={this.props.typology}>
                <option value="Starter">Starter</option>
                <option value="First">First</option>
                <option value="Second">Second</option>
              </Form.Control>
            </Form.Group>
          </Form.Row>
      </Form>

1。第一个问题就在这里，因为它是直接选择Starter的，我希望选择框为空，只有单击才能显示3个选择。

2 我的第二个问题是状态第一次不采用值this.state.typology，如果我从列表中选择另一个元素，则值this.state.typology等于第一个值。

例如：

我选择Starter

this.state.typology:

然后我选择“第一”，

this.state.typology: Starter

在我调用表单的页面中：

constructor(props){
        super(props);
        this.state={
            typology: ""
        }
    }

typology(event){
      event.preventDefault();
      let choosen = event.target.value
      this.setState({typology: choosen})
    console.log("choosen: ", choosen)
    console.log("this.state.typology: ", this.state.typology)

//Now the first console.log (choosen) wrote the right value, the second console.log (typology) the first time is without value, if I choose another value from the list it becomes equal to the first value.
  }

render() {
    return (
      <Row>
        <Col className="text-recipts">
          <h5>Search One:</h5>
          <FormRecipts typology={this.typology.bind(this)}/>
        </Col>
      </Row>
    );

我该如何解决？谢谢

反应：从选择中选择

0 个答案: