REACT this.refs不起作用

时间:2017-12-14 19:24:14

标签: javascript html css reactjs

请检查此代码:

我的渲染模板中有一个ref属性,我想和他一起玩一些动作,但是为了测试我只是控制他。但是他没有工作

如果你在我的代码上看到了focusTextInput方法,我就创建了一个简单的console.log ref值。

export default class Form extends Component {

    constructor() {
        super();
        this._createBounds();
    }

    _createBounds() {
        ['focusTextInput']
            .forEach((fn) => this[fn] = this[fn].bind(this));
    }

    static _getSkills() {
        return [
            {_id: 1, text: 'HTML'},
            {_id: 2, text: 'CSS'},
            {_id: 3, text: 'JavaScript'},
            {_id: 4, text: 'PHP'},
            {_id: 5, text: 'MYSQL'}
        ];
    }

    _renderSkills() {
        return Form._getSkills().map((skills) => (
            <Skills key={skills._id} content={skills.text}/>
        ));
    }


    /* THIS FUNCTION IS CALL WHEN ONCLICK IF FIRED */
    focusTextInput() {
        let val = this.refs.newText.value;
        console.log(val)
    }
    
    /* END */

    render() {
        return (
            <div className="header-form">
                <h2 className="header-form-title">Hello, please type informations about you</h2>
                <form className="form-container" action="#">
                    <div className="form-field">
                        <Input ref="newText" type='text' placeholder="Votre nom"/>
                    </div>
                    <div className="form-field">
                        <Input type='text' placeholder="Votre prénom"/>
                    </div>
                    <div className="form-field">
                        <Input type='text' placeholder="Votre âge"/>
                    </div>
                    <div className="form-field">
                        <Input type='text' placeholder="Votre email"/>
                    </div>
                    <div className="form-field">
                        <select className="form-field-select">
                            {this._renderSkills()}
                        </select>
                    </div>
                    <div className="form-field submit">
                        <Input onClick={this.focusTextInput} type='submit' value="Envoyer"/>
                    </div>
                </form>
            </div>
        )
    }
}

0 个答案:

没有答案