reactjs - limpiar - reset component react native
Borrar y restablecer campos de entrada de formulario (6)
Tengo un formulario que contiene varios campos de entrada y dos botones; Uno para enviar y otro para cancelar.
<form id="create-course-form">
<input type="text" name="course_Name" ref="fieldName">
<input type="text" name="course_org" ref="fieldOrg">
<input type="text" name="course_Number" ref="fieldNum">
<input type="submit" name="saveCourse" value="Create">
<input type="button" name="cancelCourse" value="cancel" onClick={this.cancelCourse}>
</form>
Lo que quiero es vaciar todas las entradas cuando se hace clic en el botón de cancelar. Hasta ahora he logrado hacer esto usando el prop ref de cada entrada.
cancelCourse(){
this.refs.fieldName.value="";
this.refs.fieldorg.value="";
this.refs.fieldNum.value="";
}
Sin embargo, quiero vaciar los campos de entrada sin tener que vaciar cada uno por separado. Quiero algo similar a esto (jQuery): $(''#create-course-form input[type=text]'').val('''');
El siguiente código debe restablecer el formulario en un clic.
import React, { Component } from ''react'';
class App extends Component {
constructor(props){
super(props);
this.handleSubmit=this.handleSubmit.bind(this);
}
handleSubmit(e){
this.refs.form.reset();
}
render(){
return(
<div>
<form onSubmit={this.handleSubmit} ref="form">
<input type="text" placeholder="First Name!" ref=''firstName''/><br/<br/>
<input type="text" placeholder="Last Name!" ref=''lastName''/><br/><br/>
<button type="submit" >submit</button>
</form>
</div>
}
}
El uso de event.target.reset() solo funciona para componentes no controlados, lo cual no se recomienda. Para componentes controlados harías algo como esto:
import React, { Component } from ''react''
class MyForm extends Component {
initialState = { name: '''' }
state = this.initialState
handleFormReset = () => {
this.setState(() => this.initialState)
}
render() {
return (
<form onReset={this.handleFormReset}>
<div>
<label htmlFor="name">Name</label>
<input
type="text"
placeholder="Enter name"
name="name"
value={name}
onChange={this.handleInputOnChange}
/>
</div>
<div>
<input
type="submit"
value="Submit"
/>
<input
type="reset"
value="Reset"
/>
</div>
</form>
)
}
}
ContactAdd.propTypes = {}
export default MyForm
La respuesta aquí depende de si sus entradas están controladas o no . Si no está seguro o necesita más información al respecto, consulte lo que dicen los documentos oficiales sobre los componentes controlados y los componentes no controlados . Gracias a Dan-Esparza por proporcionar los enlaces.
Además, tenga en cuenta que el uso de literales de cadena en la ref está en desuso . Utilice el método de devolución de llamada estándar en su lugar.
Borrar un formulario con campos no controlados
Puede borrar todo el formulario en lugar de cada campo de formulario individualmente.
cancelCourse = () => {
document.getElementById("create-course-form").reset();
}
render() {
return (
<form id="create-course-form">
<input />
<input />
...
<input />
</form>
);
}
Si su formulario no tuviera un atributo de id también podría usar una ref :
cancelCourse = () => {
this.myFormRef.reset();
}
render() {
return (
<form ref={(el) => this.myFormRef = el;}>
<input />
<input />
...
<input />
</form>
);
}
Borrar un formulario con campos controlados
Si está utilizando campos de formulario controlados, es posible que deba restablecer explícitamente cada componente dentro de su formulario, dependiendo de cómo se almacenan sus valores en el estado.
Si se declaran individualmente, necesita restablecer cada uno explícitamente:
cancelCourse = () => {
this.setState({
inputVal_1: "",
inputVal_2: "",
...
inputVal_n: "",
});
}
render() {
return (
<input value={this.state.inputVal_1} onChange={this.handleInput1Change}>
<input value={this.state.inputVal_2} onChange={this.handleInput2Change}>
...
<input value={this.state.inputVal_n} onChange={this.handleInputnChange}>
);
}
Demostración a continuación:
class MyApp extends React.Component {
constructor() {
super();
this.state = {
inputVal_1: "",
inputVal_2: "",
inputVal_3: "",
inputVal_4: "",
inputVal_5: "",
inputVal_6: "",
inputVal_7: "",
inputVal_8: "",
inputVal_9: "",
inputVal_10: ""
};
}
handleInput1Change = (e) => {
this.setState({inputVal_1: e.target.value});
}
handleInput2Change = (e) => {
this.setState({inputVal_2: e.target.value});
}
handleInput3Change = (e) => {
this.setState({inputVal_3: e.target.value});
}
handleInput4Change = (e) => {
this.setState({inputVal_4: e.target.value});
}
handleInput5Change = (e) => {
this.setState({inputVal_5: e.target.value});
}
handleInput6Change = (e) => {
this.setState({inputVal_6: e.target.value});
}
handleInput7Change = (e) => {
this.setState({inputVal_7: e.target.value});
}
handleInput8Change = (e) => {
this.setState({inputVal_8: e.target.value});
}
handleInput9Change = (e) => {
this.setState({inputVal_9: e.target.value});
}
handleInput10Change = (e) => {
this.setState({inputVal_10: e.target.value});
}
cancelCourse = () => {
this.setState({
inputVal_1: "",
inputVal_2: "",
inputVal_3: "",
inputVal_4: "",
inputVal_5: "",
inputVal_6: "",
inputVal_7: "",
inputVal_8: "",
inputVal_9: "",
inputVal_10: ""
});
}
render() {
return (
<form>
<input value={this.state.inputVal_1} onChange={this.handleInput1Change} />
<input value={this.state.inputVal_2} onChange={this.handleInput2Change} />
<input value={this.state.inputVal_3} onChange={this.handleInput3Change} />
<input value={this.state.inputVal_4} onChange={this.handleInput4Change} />
<input value={this.state.inputVal_5} onChange={this.handleInput5Change} />
<input value={this.state.inputVal_6} onChange={this.handleInput6Change} />
<input value={this.state.inputVal_7} onChange={this.handleInput7Change} />
<input value={this.state.inputVal_8} onChange={this.handleInput8Change} />
<input value={this.state.inputVal_9} onChange={this.handleInput9Change} />
<input value={this.state.inputVal_10} onChange={this.handleInput10Change} />
<input type="submit" name="saveCourse" value="Create" />
<input type="button" name="cancelCourse" value="cancel" onClick={this.cancelCourse} />
</form>
);
}
}
ReactDOM.render(<MyApp />, document.getElementById("app"));
<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="app"></div>
Sin embargo, hay una forma más limpia de hacer esto. En lugar de tener n propiedades de estado y n controladores de eventos, uno para cada entrada, con una codificación inteligente, podemos reducir el código drásticamente.
En el constructor, simplemente declaramos un objeto vacío, que se utilizará para mantener los valores de entrada. Usamos solo un controlador de entrada y le pasamos el índice del elemento de entrada del cual queremos cambiar el valor. Esto significa que el valor de una entrada individual se genera en el momento en que comenzamos a escribir en ella.
Para restablecer el formulario, solo necesitamos configurar nuestro objeto de entrada para que vuelva a estar vacío.
El valor de entrada es this.state.inputVal[i] . Si no existe (aún no hemos escrito nada en esa entrada) queremos que el valor sea una cadena vacía (en lugar de nula).
cancelCourse = () => {
this.setState({inputVal: {}});
}
render() {
return (
<form>
{[...Array(n)].map(
(item, i) => <input value={this.state.inputVal[i] || ""} onChange={this.handleInputChange.bind(this, i)} />
)}
</form>
);
}
Demostración a continuación:
class MyApp extends React.Component {
constructor() {
super();
this.state = {
inputVal: {}
};
}
handleInputChange = (idx, {target}) => {
this.setState(({inputVal}) => {
inputVal[idx] = target.value;
return inputVal;
});
}
cancelCourse = () => {
this.setState({inputVal: {}});
}
render() {
return(
<form>
{[...Array(10)].map( //create an array with a length of 10
(item, i) => <input value={this.state.inputVal[i] || ""} onChange={this.handleInputChange.bind(this, i)} /> //bind the index to the input handler
)}
<input type="submit" name="saveCourse" value="Create" />
<input type="button" name="cancelCourse" value="cancel" onClick={this.cancelCourse} />
</form>
);
}
}
ReactDOM.render(<MyApp />, document.getElementById("app"));
<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="app"></div>
Muy fácil:
handleSubmit(e){
e.preventDefault();
e.target.reset();
}
<form onSubmit={this.handleSubmit.bind(this)}>
...
</form>
Buena suerte :)
Para borrar su formulario, admitió que los valores de los elementos de su formulario se guardan en su estado, puede hacer un mapa a través de su estado así:
// clear all your form
Object.keys(this.state).map((key, index) => {
this.setState({[key] : ""});
});
Si su formulario se encuentra entre otros campos, simplemente puede insertarlos en un campo particular del estado como ese:
state={
form: {
name:"",
email:""}
}
// handle set in nested objects
handleChange = (e) =>{
e.preventDefault();
const newState = Object.assign({}, this.state);
newState.form[e.target.name] = e.target.value;
this.setState(newState);
}
// submit and clear state in nested object
onSubmit = (e) =>{
e.preventDefault();
var form = Object.assign({}, this.state.form);
Object.keys(form).map((key, index) => {
form[key] = "" ;
});
this.setState({form})
}
state={
name:"",
email:""
}
handalSubmit = () => {
after api call
let resetFrom = {}
fetch(''url'')
.then(function(response) {
if(response.success){
resetFrom{
name:"",
email:""
}
}
})
this.setState({...resetFrom})
}