Сброс входа в реакции
Я работаю над приложением для реагирования. Когда я говорю о двух входах в форме после отправки формы, мои поля не сбрасываются. Как это сделать. Я прикрепляю свой код компонента формы, может ли кто-нибудь мне в этом помочь.
import React, { Component } from 'react';
class Form extends Component {
render() {
return (
<form onSubmit = {this.props.getWeather}>
<input type = "text" name = "city" placeholder = "city.." />
<input type = "text" name = "country" placeholder = "country.." /><br></br>
<button >Submit</button>
</form>
);
}
}
export default Form;
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Внутри метода getWeather у вас будет доступ к синтетическому объекту события React, скажем, event. Получите из него собственный элемент dom с помощью event.target, а затем вызовите метод reset() как event.target.reset(). Это очистит все входные значения формы.
Поиграйте с приведенным ниже примером.
function App() {
const onFormSubmit = e => {
e.preventDefault();
e.target.reset();
};
return (
<div className = "App">
<form onSubmit = {onFormSubmit}>
<div>
<label htmlFor = "name">Enter your name: </label>
<input type = "text" name = "name" id = "name" required />
</div>
<div>
<input type = "submit" value = "Reset!" />
</div>
</form>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id = "root"></div>@RossMackay Когда form в дочернем компоненте, с ref будет слишком много работы .. Так что получить его из объекта event намного проще, ИМО.
В любом случае функция getWeather, вероятно, не должна обращать внимания на логику формы. Возможно, вы захотите получить данные поля и сбросить форму в промежуточной функции, такой как пример Arup, и заставить getWeather обрабатывать только аргументы города / страны.
Используя e.target.reset (); в функции getWeather в основном компоненте работает. Спасибо @ArupRakshit
Спасибо @RossMackay
Или, в качестве альтернативы, установите ссылку на форму и вызовите метод сброса, как описано