请检查此代码:
我的渲染模板中有一个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>
)
}
}