Deelux Deelux - 1 month ago 26
Javascript Question

How to get the value from FormControl with React-Bootstrap in Meteor

I'm using react-bootstrap in my current Meteor project. I can't seem to get this form to work. What am I doing wrong? I can't seem to be able to read the value of the FormControl input.

At the moment I am getting this error:
"imports/ui/components/add-spark.js:35:61: Unexpected token (35:61)"

Also my modal doesn't work anymore when I add 'ref="city"' to FormControl.
Then I get this error: "Uncaught Invariant Violation: Stateless function components cannot have refs"

UPDATE:
I have managed to get the ref in my modal working. But still I can't get the value from the form.
I ofcourse forgot to make it a class object which caused a lot of the problems. Now I am getting a different error though:

"Uncaught TypeError: Cannot read property 'cityInput' of undefined"

When I try to add my function like this:



<form onSubmit={ this.handleInsertSpark.bind(this) }>





My modal won't work anymore. I then get this error code:
"add-spark.js:53 Uncaught TypeError: Cannot read property 'bind' of undefined(…)"

This is my current code:



const handleInsertSpark = (event) => {
event.preventDefault();

var city = ReactDOM.findDOMNode(this.refs.cityInput).value
console.log(city);

};

function FieldGroup({ id, label, help, ...props }) {
return (
<FormGroup controlId={id}>
<ControlLabel>{label}</ControlLabel>
<FormControl {...props} />
{help && <HelpBlock>{help}</HelpBlock>}
</FormGroup>
);
}

export default class AddSpark extends Component {
render() {
return (<div>
<form onSubmit={ handleInsertSpark }>
<FormGroup controlId="formControlsCity">
<ControlLabel>Select your city</ControlLabel>
<FormControl componentClass="select" placeholder="Choose your city" ref="cityInput" onClick={ moreOptions }>
<option value="select">Choose your city</option>
<option value="0">Beijing</option>
<option value="1">Shanghai</option>
<option value="2">Chengdu & Chongqing</option>
</FormControl>
</FormGroup>

<FormGroup controlId="formControlsPerson">
<ControlLabel>Select your person</ControlLabel>
<FormControl componentClass="select" placeholder="Choose your person">
<option value="select">First select your city</option>
</FormControl>
</FormGroup>

<FormGroup controlId="formControlsLocation">
<ControlLabel>Select your location</ControlLabel>
<FormControl componentClass="select" placeholder="Choose your location">
<option value="select">First select your city</option>
</FormControl>
</FormGroup>


<FieldGroup
id="formControlsText"
type="text"
label="Title"
placeholder="Enter your title"
/>

<FormGroup controlId="formControlsTextarea">
<ControlLabel>Content</ControlLabel>
<FormControl componentClass="textarea" placeholder="textarea" />
</FormGroup>

<div className="upload-area">
<p className="alert alert-success text-center">
<span>Click or Drag an Image Here to Upload</span>
<input type="file" onChange={this.uploadFile} />
</p>
</div>

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




Answer

I managed to solve this myself by reading the React documentation again. Seems like I was just not using React in the way it is intended.

Here is my the code that works and does what I want it to do:

function FieldGroup({ id, label, help, ...props }) {
  return (
    <FormGroup controlId={id}>
      <ControlLabel>{label}</ControlLabel>
      <FormControl {...props} />
      {help && <HelpBlock>{help}</HelpBlock>}
    </FormGroup>
  );
}

export default class AddSpark extends Component {
   constructor(props){
    super(props)
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('Text field value is: ' + this.state.value);
  }

  render() {
    return (<div>
  <form >
    <FormGroup controlId="formControlsCity">
      <ControlLabel>Select your city</ControlLabel>
      <FormControl componentClass="select" placeholder="Choose your city" onClick={ moreOptions } value={this.state.value} onChange={this.handleChange} >
        <option value="select">Choose your city</option>
        <option value="Beijing">Beijing</option>
        <option value="Shanghai">Shanghai</option>
        <option value="Chengdu & Chongqing">Chengdu & Chongqing</option>
      </FormControl>
    </FormGroup>

<FormGroup controlId="formControlsPerson">
      <ControlLabel>Select your person</ControlLabel>
      <FormControl componentClass="select" placeholder="Choose your person">
        <option value="select">First select your city</option>
      </FormControl>
    </FormGroup>

<FormGroup controlId="formControlsLocation">
      <ControlLabel>Select your location</ControlLabel>
      <FormControl componentClass="select" placeholder="Choose your location">
        <option value="select">First select your city</option>
      </FormControl>
    </FormGroup>


    <FieldGroup
      id="formControlsText"
      type="text"
      label="Title"
      placeholder="Enter your title"
    />
    
    <FormGroup controlId="formControlsTextarea">
      <ControlLabel>Content</ControlLabel>
      <FormControl componentClass="textarea" placeholder="textarea" />
    </FormGroup>

    <div className="upload-area">
        <p className="alert alert-success text-center">
          <span>Click or Drag an Image Here to Upload</span>
          <input type="file" onChange={this.uploadFile} />
        </p>
    </div>

    <Button
      onClick={this.handleSubmit}>
      Submit
    </Button>
  </form>
  </div>
  )}
  }

Comments