從組件訪問表單控件值

Question

我有一個表格：

<form onSubmit={this.onSubmit}>
  <input ref="name" type="text" />
  ...
  <select ref="pet">
    <option>Dog</option>
    <option>Cat</option>
  </select>
</form>

在另一個地方，我具有不同的形式，具有不同的輸入，但是具有相同的select 。 我可以簡單地從第一個代碼中綁定代碼，但是我不想這么做。

我要制作一個組件。 就UI而言，我知道它會起作用。 但是，在這種情況下，我不知道如何訪問this.refs.pet.value ：

<form onSubmit={this.onSubmit}>
  <input ref="name" type="text" />
  ...
  <PetsSelect ??????? />
</form>

如何從組件的父級（窗體）中訪問select框的值？

Answer 1

關於作曲的非常簡單的例子

class PetsSelect extends React.Component {

  get value(){
    return this.state.value
  }

  handleChange(key, value){
    this.setState({[key]: value})
    this.props.onChange && this.props.onChange(key, value)
  }

  constructor(props){
    super(props)
    this.state = { value: props.value || '', name: '' }
  }

  render(){
    // add the name etc and then you can handleChange('name', ...) 
    // or make it more DRY
    return <div>
      <select 
        ref={select => this.select = select} 
        value={this.state.value} 
        onChange={e => this.handleChange('value', e.target.value)}>
        <option value=''>Please select</option>
        <option value='dog'>Dog</option>
        <option value='cat'>Cat</option>
      </select>
    </div>
  }
}


class Form extends React.Component {
  handleSubmit(e){
    e.preventDefault()
    console.log(this.pets.value)
  }
  render(){
    // this.pets becomes the instance of the PetsSelect class.
    return <form onSubmit={e => this.handleSubmit(e)}>
      <PetsSelect ref={pets => this.pets = pets} />
      <button type='submit'>try it</button>
    </form>
  }
}

ReactDOM.render(<Form />, document.getElementById('app'))

參見此處： https : //codepen.io/anon/pen/WExepp?editors=1010#0 。 基本上，您可以：onChange並獲取父項中的值，或者在需要時讀取子項的值。

請記住，您說的是“受控”-我沒有做任何事情來使props.value與state.value保持state.value -在不受控制的情況下，您將使用defaultValue

Answer 2

只需添加這樣的<PetsSelect ref="petSelect"/>並通過this.refs.petSelect.refs.pet.value獲取值。

Answer 3

class FormComponent extends React.Component{

  constructor(props){
      super(props)
      this.state = {selected: null,
                    ...
                    }
  } 

  selectPet(e){
      this.setState({selected: e.target.value})
  }   

   render(){
       return (<form onSubmit={this.onSubmit}>
           <input ref="name" type="text" />
           ...
           <PetsSelect onSelect={this.selectPet.bind(this)} />
         </form>)
     }
}

class PetsSelect extends React.Component{
   constructor(props){
       super(props)    
   }

   render(){
     return (<select onChange={this.props.onSelect}>
                 <option value='dog'>Dog</option>
                 <option value='cat'>Cat</option>
            </select>)
   }

}