reactjs - onSubmit 不适用于 react-bootstrap 表单

问题描述

我有一个导航栏，里面有一个表格。我希望将我所有的 onSubmit 数据发送到我的 firebase 实时数据库。但是当我绑定我的 onSubmit 函数时，它根本没有任何作用。我的按钮或表单（我不确定）在提交时未检测到任何操作

我尝试将我的 onSubmit 字段直接放在我的 Button 中，结果相同，但没有任何效果。我尝试在我的handleSubmit 函数中添加一个console.log，以查看当我单击我的Button 时它是否正常工作，但什么也没发生。我的控制台保持空白。我还把我的表单从我的导航栏里拿出来只是为了进行测试。同样的结果，不起作用。

有人知道发生了什么吗？应用程序.js

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sheetLoaded: false,
      isNotClicked: true,
      isMoreFiltersNotRequired: true,
      handleShopClick: false,
      selectedOption: "option1",
      cabinePhoto: false,
      bornePhoto: false,
      helioBooth: false,
      filteredResults: [],
      filteredResultsLength: 0,
      rating: 5,
      shops: [],
      loading: true,
      zip_code: "",
      searchResult:""
    };
    //To resolve clone App error when we are initializing App

    if (!firebase.apps.length) {
      firebase.initializeApp(config);
    }
  }

  checkLoading = () => {
    if (this.state.loading === true) {
      console.log("loading...");
    } else if (this.state.loading === false) {
      console.log("Finish load");
    }
  };

  getUserData = () => {
    let ref = firebase.database().ref("shops");
    ref.on("value", snapshot => {
      const state = snapshot.val();
      this.setState({
        shops: state,
        loading: false
      });
    });
  };

  componentWillMount() {
    this.checkLoading();
    this.getUserData();
  }

  handleChanges = e => {
    const input = e.currentTarget;
    const name = input.name;
    const value = input.type === "checkbox" ? input.checked : input.value;
    this.setState({ [name]: value });
  };

  handleSubmit = (e) =>{
    console.log('search clicked')
    e.preventDefault();
    const itemsRef = firebase.database().ref('search');
    const result = {
      zip_code: this.state.zip_code,
      selectedOption: this.state.selectedOption
    }
    itemsRef.push(result);
    this.setState({
      zip_code: '',
      selectedOption: ''
    });
  }

应用程序.js

[…………]

  render() {
    return (
      <Router>
          <HeaderFilters
            wrapperHeaderFunction={this.wrapperHeaderFunction}
            zip_code={this.state.zip_code}
            handleChanges={this.handleChanges}
            handleSubmit={this.handleSubmit}
            isClicked={this.isClicked}
            filterClick={this.filterClick}
            selectedOption={this.state.selectedOption}
            moreFilterClick={this.moreFilterClick}
            filteredResults={this.state.filteredResults}
            rating={this.state.rating}
            startDate={this.state.startDate} // momentPropTypes.momentObj or null,
            startDateId="your_unique_start_date_id" // PropTypes.string.isRequired,
            endDate={this.state.endDate} // momentPropTypes.momentObj or null,
            endDateId="your_unique_end_date_id" // PropTypes.string.isRequired,
            onDatesChange={({ startDate, endDate }) =>
              this.setState({ startDate, endDate })
            } // PropTypes.func.isRequired,
            focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
            onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired,
      />

[.......]

导航栏组件

class HeaderFilters extends Component {
  state = {};

  render() {
    return (
      <React.Fragment>
        <Navbar id="navbar" className="bg-light">
          <Link to='/'><Navbar.Brand href="#home">Comparator-Booth</Navbar.Brand></Link>
          <Form inline onSubmit={this.props.handleSubmit}>
            {["radio"].map(type => (
              <React.Fragment key={`custom-inline-${type}`}>
                <Form.Check
                  custom
                  inline
                  label="Particuliers"
                  type={type}
                  id={`custom-inline-${type}-1`}
                  jsname="wCJL8"
                  name="selectedOption"
                  value="particuliers"
                  checked={this.props.selectedOption === "particuliers"}
                  onChange={this.props.handleChanges}
                />
                <Form.Check
                  custom
                  inline
                  label="Pros"
                  type={type}
                  id={`custom-inline-${type}-2`}
                  name="selectedOption"
                  value="pros"
                  checked={this.props.selectedOption === "pros"}
                  onChange={this.props.handleChanges}
                />
              </React.Fragment>
            ))}
          </Form>
          &nbsp;
          <Form inline>
            <FormControl
              placeholder="Code postal"
              aria-label="Code postal"
              aria-describedby="basic-addon1"
              type="text"
              name="zip_code"
              value={this.props.zip_code}
              onChange={this.props.handleChanges}
            />
            &nbsp;
            <DateRangePicker
              startDate={this.state.startDate} // momentPropTypes.momentObj or null,
              startDateId="your_unique_start_date_id" // PropTypes.string.isRequired,
              endDate={this.state.endDate} // momentPropTypes.momentObj or null,
              endDateId="your_unique_end_date_id" // PropTypes.string.isRequired,
              onDatesChange={({ startDate, endDate }) =>
                this.setState({ startDate, endDate })
              } // PropTypes.func.isRequired,
              focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
              onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired,
              displayFormat={() => moment.localeData("fr").longDateFormat("L")}
            />
            &nbsp;
            <Button type="submit"variant="success" onClick={this.props.filterClick} ><Link to = "/search" >Recherche !</Link></Button> &nbsp;

            <Button variant="primary" onClick={this.props.moreFilterClick}>
              Plus de filtres !
            </Button>
          </Form>
        </Navbar>
      </React.Fragment>
    );
  }
}

export default HeaderFilters;

标签： reactjsfirebase-realtime-databasereact-bootstrap

reactjs - onSubmit 不适用于 react-bootstrap 表单

问题描述

解决方案

推荐阅读