在表单提交

Question

如何使用React JS将选择框选择重置为表单提交后的第一个选择？

请参阅以下代码段：

import React, { Component } from "react";
import { RouteComponentProps } from "react-router";

export class Contactform extends Component {
  constructor(props) {
    super(props);

    this.state = {
        name: '',
        email: '',
        payment: [],
        loading: true
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  componentDidMount(){    
    fetch('http://www.json-generator.com/api/json/get/cgBGpTYqKW?indent=2')
    .then((res) => res.json())
    .then((data) => {
      this.setState({ name: data[0].name, email:data[0].email, payment:data[0].payment, loading: false });
    })
  }

  handleChange(event) {
    this.setState({
        [event.target.name]: event.target.value
    })
  }

  handleSubmit(event) {
    event.preventDefault();
    const form = {
     name: this.state.name,
     email: this.state.email,
     payment: this.state.selectbox
    }

    var database = [];
    database.push(form);
    this.setState({
         name: '',
         email: ''
         //How to set a selectbox default value?
    })
  }

    render() {

      if(this.state.loading) {
        return <span>Loading...</span>
      } else {
        return (
          <div>
              <form onSubmit={this.handleSubmit}>

                        <select className="form-control" name="selectbox" onChange={this.handleChange}>
                          {this.state.payment.map((payment) => 
                            <option key={payment.value} value={payment.value}>{payment.text}</option>
                          )}
                        </select>

                    <button type="submit">Submit</button>
              </form>
          </div>
        );
      }
    }
  }

由于

Answer 1

更改您的代码，如下所示

import React, { Component } from "react";
import { RouteComponentProps } from "react-router";

export class Contactform extends Component {
  constructor(props) {
    super(props);

    this.state = {
        name: '',
        email: '',
        payment: [],
        loading: true,
        selectbox:"", //set your default value here 
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  componentDidMount(){    
    fetch('http://www.json-generator.com/api/json/get/cgBGpTYqKW?indent=2')
    .then((res) => res.json())
    .then((data) => {
      this.setState({ name: data[0].name, email:data[0].email, payment:data[0].payment, loading: false });
    })
  }

  handleChange(event) {
    this.setState({
        [event.target.name]: event.target.value
    })
  }

  handleSubmit(event) {
    event.preventDefault();
    const form = {
     name: this.state.name,
     email: this.state.email,
     payment: this.state.selectbox
    }

    var database = [];
    database.push(form);
    this.setState({
         name: '',
         email: ''
         selectbox: "" // Change the default value here
    })
  }

    render() {

      if(this.state.loading) {
        return <span>Loading...</span>
      } else {
        return (
          <div>
              <form onSubmit={this.handleSubmit}>

                        <select className="form-control" name="selectbox" onChange={this.handleChange} value={this.state.selectbox}>
                          {this.state.payment.map((payment) => 
                            <option key={payment.value} value={payment.value}>{payment.text}</option>
                          )}
                        </select>

                    <button type="submit">Submit</button>
              </form>
          </div>
        );
      }
    }
  }

Answer 2

您可以在班级中存储defaultValue和selectValue状态来控制选择框的值

this.defaultValue = null;

this.state = {
    selectValue: defaultValue;
}

<form onSubmit={this.handleSubmit}>
    <select 
        className="form-control" 
        name="selectbox" 
        onChange={this.handleChange}
        value={this.state.selectValue}
    >
        {this.state.payment.map((payment) => 
        <option key={payment.value} value={payment.value}>{payment.text}</option>
        )}
    />
    <button type="submit">Submit</button>
</form>

handleSubmit() {
    // submit ...
    this.setState({
        this.state.selectValue: defaultValue
    })  
}

不完全正确，但主要想法就是这样。抱歉我的英文不好：）