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

Question

需要使用react和ref属性为Title（Mr.＆amp; Ms.）创建单选按钮。

课程代码（省略无用部分）： -

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>

      )
     }

问题： - 如何在getTitl e（）中获取所选的标题值？

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

我希望它会对你有所帮助！

谢谢！