javascript - 使用 ref 在 React 中创建单选按钮

Question

需要为标题(先生和女士)创建单选按钮使用 react 和 ref 属性。

类代码(省略无用部分):-

getTitle () {
// how could I get the selected title value here
var title = this.refs. ??;
},

render () {
   return (
       <div className='input-wrap'>
                        <label className='label'>
                            Mr.
                        </label>
                        <input  className='input'
                                type='radio'
                                ref= 'title'
                                name='user_title'
                                value='Mr.'
                                selected />

                        <label className='label'>
                            Ms.
                        </label>
                        <input  className=input'
                                type='radio'
                                ref= 'title'
                                name='user_title'
                                value='Ms.' />
                    </div>

      )
     }

问题:- 如何在 getTitle() 中获取选定的标题值？

Answer 1

你可以在没有 refs 的情况下做到这一点。

class Radio extends React.Component{
    constructor(){
        super();
        this.state = {
            inputValue : ''
        }

    }

    change(e){
        const val = e.target.value;
        this.setState({
            inputValue : val
        })
    }
    render(){
        return <div>
                <label>MR<input type="radio" name="name" onChange={this.change.bind(this)} value="MR"/></label>
                <label>MS<input type="radio" name="name" onChange={this.change.bind(this)} value="MS"/></label>
                <br/>
                <h2>Value : {this.state.inputValue}</h2>
        </div>
    }
}

React.render(<Radio/>, document.getElementById('container'))

Fiddle example is here

希望对您有所帮助!

谢谢!