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并获取父级中的值，或者在需要时读取子级的值。

请记住，你曾说过“受控制的”＆＃39; - 我没有采取任何措施将props.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>)
   }

}

从组件

3 个答案: