React.createRef не является функцией в реактивных рельсах
Я использую драгоценный камень react-rails в моем проекте Ruby on Rails. Я пытаюсь добавить ссылку на свой элемент DOM. Это моя составляющая:
class NewItem extends React.Component {
constructor(props) {
super(props);
this.name = React.createRef();
}
handleClick() {
var name = this.name.value;
console.info(name);
}
render() {
return (
<div>
<input ref = {this.name} placeholder='Enter the name of the item' />
<button onClick = {this.handleClick}>Submit</button>
</div>
);
}
};
Когда я пытаюсь загрузить страницу в браузере, в консоли появляется следующее сообщение:
TypeError: React.createRef is not a function. (In 'React.createRef()', 'React.createRef' is undefined).
@GautamNaik да
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Попробуйте изменить это
handleClick() {
var name = this.name.value;
console.info(name);
}
к
handleClick = () => {
var name = this.name.current.value;
console.info(name);
}
Не используйте ref для получения значения ввода. Используйте этот метод
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChangeEvent = this.handleChangeEvent.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChangeEvent(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit = {this.handleSubmit}>
<label>
Name:
<input type = "text" value = {this.state.value} onChange = {this.handleChangeEvent} />
</label>
<input type = "submit" value = "Submit" />
</form>
);
}
}
Привет @GautamNaik Спасибо за ответ. Когда я пытаюсь изменить свою функцию handleClick на вашу, у меня появляется эта ошибка: SyntaxError: unknown: Unexpected token (7:14) 5 | } 6 | > 7 | handleClick = () => { | ^ 8 | var name = this.name.current.value; 9 | console.info(name); 10 | } Когда я меняю только var name = this.name.current.value;, у меня такая же ошибка, как и в верхнем сообщении. Ваш метод работает хорошо, но что, если мне понадобится ссылка в другом месте?
вы можете использовать реквизиты, если хотите отправить значение другим компонентам
Нет, я спрашиваю о ссылке. Я не могу создать ссылку ни на один элемент DOM. Как я могу это исправить? Используйте ссылку - это идеология React.js.
обновление реагировать на 16.3 React.createRef () этот API добавлен в React 16.3 проверить это https://github.com/facebook/react/pull/12162
Вы используете последнюю версию React?