javascript - React Checkbox & Select onChange - Stack Overflow

admin管理员组

文章数量:1340366

I've read plenty of question on this subject & gone over the documentation for React as well, but I'm still no wiser this. I cannot get an input field to emit anything (an event) on click or change.

My code is below and other than using materialzecss, I'm using basic HTML/JSX & no other javascript.

I'm simply unable to update the input to toggle between checked/not-checked on either onChange or onClick. Can anybody tell me where I'm going wrong here?

import React, { Component } from 'react'
import Alert from '../ponents/shared/Alert'
import { Redirect } from 'react-router-dom'
import axios from 'axios'

class Create extends Component {
  constructor(){
    super()
    this.state = {
      redirect:false,
      alert:{
        show: false
      },
      checked:true
    }
  }

  handleChange(event) {
    this.setState({
      recipe : {[event.target.name]: event.target.value}
    })
    console.log(this.state);

  }

  handleSubmit(event) {

  }


  render() {
    const { redirect } = this.state;
    const showAlert = this.state.alert.show;
     if (redirect) {
       return <Redirect to='/'/>;
     } else if (showAlert) {
        console.log("alert");
     }
    return (
      <div className="row">
        {showAlert ? <Alert /> : ''}
        <div className="container">
          <div className="row">
              <div className="col s10 offset-s1  z-depth-1" id="loginForm">
              <h5 className="red darken-4" id="title">Create New Recipe</h5>
              <form >
                <div className="input-field" id="username" >
                  <input type="text" className="validate" name="name"
                  onChange={this.handleChange.bind(this)} />
                  <label htmlFor="name">Name</label>
                </div>
                <div className="input-field" id="password">
                  <input type="text" className="validate" name="intro" 
                  onChange={this.handleChange.bind(this)} />
                  <label htmlFor="password">Intro</label>
                </div>
                <div className="input-field" id="password">
                  <textarea id="textarea1" className="materialize-textarea" name="body" 
                  onChange={this.handleChange.bind(this)}>
                  </textarea>
                  <label htmlFor="textarea1">Recipe</label>
                </div>
                <div className="row">
                  <div className="input-field col s12 m5" id="password">
                    <Serves function={this.handleChange.bind(this)}/>
                    <label>Serves</label>
                  </div>
                  <div className="input-field col s12 m5" id="test">
                    <select name="cuisine" defaultValue="2" onChange={(e)=>{console.log(e)}}>
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                    </select>
                    <label>Cuisine</label>
                  </div>
                </div>
                <div className="input-field" id="password">
                  <input type="checkbox" className="filled-in" id="filled-in-box"/>
                  <label htmlFor="filled-in-box">Public?</label>
                </div>
              <button type="submit" className="waves-effect waves-light btn red darken-4" id="loginbtn">Login</button>
              <a href="/app/dashboard" className="waves-effect waves-light btn amber darken-1" id="loginbtn">Back</a>
            </form>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default Create;

const Serves = (props) => {
  return(
    <select onChange={props.function} name="serves" >
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="9">10</option>
    </select>
  )
}

I've read plenty of question on this subject & gone over the documentation for React as well, but I'm still no wiser this. I cannot get an input field to emit anything (an event) on click or change.

My code is below and other than using materialzecss, I'm using basic HTML/JSX & no other javascript.

I'm simply unable to update the input to toggle between checked/not-checked on either onChange or onClick. Can anybody tell me where I'm going wrong here?

import React, { Component } from 'react'
import Alert from '../ponents/shared/Alert'
import { Redirect } from 'react-router-dom'
import axios from 'axios'

class Create extends Component {
  constructor(){
    super()
    this.state = {
      redirect:false,
      alert:{
        show: false
      },
      checked:true
    }
  }

  handleChange(event) {
    this.setState({
      recipe : {[event.target.name]: event.target.value}
    })
    console.log(this.state);

  }

  handleSubmit(event) {

  }


  render() {
    const { redirect } = this.state;
    const showAlert = this.state.alert.show;
     if (redirect) {
       return <Redirect to='/'/>;
     } else if (showAlert) {
        console.log("alert");
     }
    return (
      <div className="row">
        {showAlert ? <Alert /> : ''}
        <div className="container">
          <div className="row">
              <div className="col s10 offset-s1  z-depth-1" id="loginForm">
              <h5 className="red darken-4" id="title">Create New Recipe</h5>
              <form >
                <div className="input-field" id="username" >
                  <input type="text" className="validate" name="name"
                  onChange={this.handleChange.bind(this)} />
                  <label htmlFor="name">Name</label>
                </div>
                <div className="input-field" id="password">
                  <input type="text" className="validate" name="intro" 
                  onChange={this.handleChange.bind(this)} />
                  <label htmlFor="password">Intro</label>
                </div>
                <div className="input-field" id="password">
                  <textarea id="textarea1" className="materialize-textarea" name="body" 
                  onChange={this.handleChange.bind(this)}>
                  </textarea>
                  <label htmlFor="textarea1">Recipe</label>
                </div>
                <div className="row">
                  <div className="input-field col s12 m5" id="password">
                    <Serves function={this.handleChange.bind(this)}/>
                    <label>Serves</label>
                  </div>
                  <div className="input-field col s12 m5" id="test">
                    <select name="cuisine" defaultValue="2" onChange={(e)=>{console.log(e)}}>
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                    </select>
                    <label>Cuisine</label>
                  </div>
                </div>
                <div className="input-field" id="password">
                  <input type="checkbox" className="filled-in" id="filled-in-box"/>
                  <label htmlFor="filled-in-box">Public?</label>
                </div>
              <button type="submit" className="waves-effect waves-light btn red darken-4" id="loginbtn">Login</button>
              <a href="/app/dashboard" className="waves-effect waves-light btn amber darken-1" id="loginbtn">Back</a>
            </form>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default Create;

const Serves = (props) => {
  return(
    <select onChange={props.function} name="serves" >
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="9">10</option>
    </select>
  )
}

• javascript
• reactjs
• materialize

Share Improve this question Follow asked Mar 10, 2018 at 17:35 user5210565user5210565 1

• 1 your checkbox input doesn't have an onChange handler – crumbug Commented Mar 10, 2018 at 17:40

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

You need to add the checked attribute to the input field and set it equal to the state property you are changing

add this method:

handleCheckClick = () => {
  this.setState({ checked: !this.state.checked });
}

and change the checkbox jsx:

<input type="checkbox" checked={this.state.checked} onChange={this.handleCheckClick} className="filled-in" id="filled-in-box"/>

Make use of refs:

<select onChange={props.function} ref="serves" >
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="9">10</option>
    </select>

And now in your props.function get the select tag's value with: this.refs.serves.value.

For more info on refs checkout this.

You have to set the value attribute on the input to se the setted value. It has to be equality to this.state.{inputName}. And use The bindings in constructor, is the preferred approach.

本文标签： javascriptReact Checkbox amp Select onChangeStack Overflow