Question

如果您需要更多信息，请不要投票！我是这个网站的新手，想要更好地提出这些问题。我快速更新。提前谢谢！

这对我来说可能是一个愚蠢的错误。我相信它之前正在工作，我所做的就是将我的样式从基础更改为自举，现在我的一些React组件无法正常工作。这是受折磨代码的几个片段。我希望能得到一些关于发生的事情的想法。这是我的文字区域

import React from 'react';

import { ControlLabel } from 'react-bootstrap'
import { FormControl } from 'react-bootstrap'

const CheckField = (props) => {
  return(
  <div>
    <ControlLabel>{props.label}</ControlLabel>
      <FormControl
        name={props.body}
        type='text'
        onChange={props.handlerFunction}
        value={props.content}
      />
      <FormControl.Feedback />
  </div>
    );
  }

  export default CheckField;

这是我的表格

     import React, { Component } from 'react';
     import CheckField from '../components/CheckField'
     import ArrowContainer from './ArrowContainer'
     import { FormGroup } from 'react-bootstrap'
     import { FormControl } from 'react-bootstrap'

    class FormContainer extends Component {
    constructor(props) {
      super(props);
      this.state = {
        errors: {},
        checkConsumed: '',
        check: ''
      }
        this.handleClearForm = this.handleClearForm.bind(this);
        this.handleFormSubmit = this.handleFormSubmit.bind(this);
        this.handleCheckChange = this.handleCheckChange.bind(this);
        this.validateCheck = this.validateCheck.bind(this);
      }


      // componentDidMount() {
      //   this.loadReviewsFromServer();
      //   setInterval(this.loadReviewsFromServer.bind(this), this.props.pollInterval);
      // }

        // setInterval(clickHandler)
        // {this.props.onClick, this.state.actualTimeSelected)};

      handleClearForm(event) {
        event.preventDefault();
        this.setState({
          errors: {},
          checkConsumed: '',
          check: ''
        })
      }
      handleFormSubmit(event) {
        event.preventDefault();
        {
          let formPayload = {
            check: this.state.checkConsumed,
            category_id: this.props.categoryId
          };
          if (this.validateCheck(formPayload.check)){

            this.props.addNewReality(formPayload);
            this.handleClearForm(event);
          }

        }
      }
      handleCheckChange(event) {
        this.setState({ checkConsumed: event.target.value })
      }

      validateCheck(check) {
        if (check === '') {
          let newError = { check: 'You must write a check.' }
          this.setState({ errors: Object.assign(this.state.errors, newError) })
          return false
        } else {
          let errorState = this.state.errors
          delete errorState.handleFormSubmit
          this.setState({ errors: errorState })
          return true
        }
      }
  render() {
    let errorDiv;
    let errorItems;
    if (Object.keys(this.state.errors).length > 1) {
      errorItems = Object.values(this.state.errors).map(error => {
        return(<li key={error}>{error}</li>)
      })
      errorDiv = <div className="callout alert">{errorItems}</div>
    }
  return (
      <div>
        <FormGroup className="callout reactform col-xs-2 col-sm-8 `col-md-4 col-lg-12 " onSubmit={this.handleFormSubmit}>`
        {errorDiv}
        <div className="reality input">
          <CheckField className="reality input"
            content={this.state.checkConsumed}
            label='Create Question Quote or Statement for the Database!'
            name='check'
            placeholder="realities"
            type="text"
            id="reality"
            handlerFunction={this.handleCheckChange}
          />
        </div>
          <div className="button-group expanded react-buttons">
            <button className="button large" id="clear" onClick={this.handleClearForm}>Clear</button>
            <input className="button large" type="submit" id="submit" value="Submit" />
            <button className="reload success button" >
              <a className="reload" href="javascript:location.reload(true)">Reload Realities to see yours!</a>
            </button>
          </div>
        </FormGroup>
        <div className= "animated SlideInLeft arrow">
          <
          ArrowContainer
          user_id = {this.props.user}
          categoryId = {this.props.categoryId}
          checkConsumed = {this.props.checkConsumed}/>
        </div>

      </div>
    );
  }
}
export default FormContainer;

Answer 1

因此，经过同事的一些建议，我调查了针对我遇到问题的容器的CSS。实际上，我刚刚删除了它。现在它有效。基本上CSS有时很粗鲁，并且不会很好玩。希望有一天能帮助别人。

将代码从基础更改为引导程序现在我的整个表单不可点击，是什么给出了？

1 个答案: