Я сделал форму в ReactJS с одним текстовым вводом, и когда он отправляется, я хочу получить его значение и поместить его в переменную. Но когда я использую console.info(), он возвращается как undefined. Как это исправить? Вот мой код.
class App extends Component {
state = {
todoTitle: ""
};
render() {
return (
<div>
<center>
<form
onSubmit = {(event) => {
event.preventDefault();
this.setState(todoTitle: event.target.value,);
console.info(this.state.todoTitle); // Returns "undefined"
}}
>
<input
type = "text"
autocomplete = "off"
class = "form-control"
name = "todoInput"
placeholder = "Enter todo"
style = {{ width: "400px", height: "50px" }}
/>
<input
type = "submit"
value = "Submit"
id = "submitButton"
></input>
</form>
</center>
}
}
}
🤔 А знаете ли вы, что...
JavaScript может выполняться как на стороне клиента (в браузере), так и на стороне сервера (с использованием Node.js).
В вашем коде есть несколько других ошибок, но я просто отвечу на ваш вопрос.
setState вызывает повторный рендеринг, поэтому ваше состояние недоступно для регистрации до следующего запуска. Вы можете просто записать то, что вы поместили в setState.
console.info(event.target.value);
Этот вопрос содержит больше информации. setState не обновляет состояние сразу
Кроме того, вы можете сделать обратный звонок.
this.setState({ todoTitle: event.target.value }, () =>
console.info(this.state.todoTitle)
);
Вы можете немного изменить свое приложение, чтобы получить значение onChange входного текстового поля, а затем сохранить его в массиве в случае приведенного ниже примера:
export default class App extends React.Component {
state = {
todoTitle: "",
todoList: []
};
render() {
return (
<div>
<center>
<form
onSubmit = {event => {
event.preventDefault();
this.setState(
{
todoList: [...this.state.todoList, this.state.todoTitle]
},
() => {
console.info(this.state.todoList);
}
);
}}
>
<input
type = "text"
autocomplete = "off"
class = "form-control"
name = "todoInput"
placeholder = "Enter todo"
onChange = {event => {
this.setState({ todoTitle: event.target.value });
console.info(event.target.value);
}}
style = {{ width: "400px", height: "50px" }}
/>
<input type = "submit" value = "Submit" id = "submitButton" />
</form>
</center>
</div>
);
}
}
Полное приложение здесь: Stackblitz
Попробуй это:
class App extends React.Component {
constructor(props) {
super(props);
this.state = { todoTitle: "" };
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChangeEvent = this.handleChangeEvent.bind(this);
}
handleChangeEvent(event) {
event.preventDefault();
this.setState({ todoTitle: event.target.value });
}
handleSubmit(event) {
event.preventDefault();
console.info(this.state.todoTitle);
}
render() {
return (
<div>
<center>
<form onSubmit = {this.handleSubmit}>
<input
type = "text"
autocomplete = "off"
class = "form-control"
name = "todoInput"
placeholder = "Enter todo"
style = {{ width: "400px", height: "50px" }}
onChange = {this.handleChangeEvent}
/>
<input type = "submit" value = "Submit" id = "submitButton" />
</form>
</center>
</div>
);
}
}
Это изменит состояние при изменении ввода, а затем войдет в систему для отправки состояния. Альтернативой может быть просто получение элемента ввода и его значения через getElementById или что-то подобное в React.
Ваш код также был не очень хорошо отформатирован, и многие закрывающие теги пропущены.
Подробнее здесь: Получить данные формы в ReactJS
Вам нужно либо сделать controlled input, либо useRef для неконтролируемого ввода, чтобы React отслеживал ваше todoTitle состояние.
Чтобы сделать controlled input, вам нужно будет использовать onChange event и свойство value = {this.state.todoTitle}.
Также в форму лучше добавить событие onSubmit. Однако есть возможность также установить отправку на кнопке отправки формы. В этом случае нам нужно использовать onClick = {this.handleSubmit} следующим образом <input type = "submit" value = "Submit" id = "submitButton" onClick = {this.handleSubmit} />.
Код ниже будет работать для вас:
class Form extends React.Component {
state = {
todoTitle: "",
};
handleSubmit = (e) => {
e.preventDefault();
console.info(this.state.todoTitle);
};
render() {
return (
<div>
<form onSubmit = {this.handleSubmit}>
<input
type = "text"
autocomplete = "off"
class = "form-control"
name = "todoInput"
placeholder = "Enter todo"
style = {{ width: "400px", height: "50px" }}
value = {this.state.todoTitle}
onChange = {(e) => this.setState({ todoTitle: e.target.value })}
/>
<input type = "submit" value = "Submit" id = "submitButton" />
</form>
</div>
);
}
}