فرض کنیم که در فرم خود چندین فیلد ورودی داریم.چگونه می توانیم در react آنها را کنترل کنیم با آنها کار کنیم؟
- فرشته حقیقی 4 سال قبل سوال کرد
- شما باید برای ارسال دیدگاه وارد شوید
برای اینکار می توانیم در فیلدهای ورودی خود ویژگی name
را اضافه کنیم و با این ویژگی به آن فیلد دسترسی پیدا کنیم:
class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {
username: '',
age: null,
};
}
myChangeHandler = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({[nam]: val});
}
render() {
return (
<form>
<h1>Hello {this.state.username} {this.state.age}</h1>
<p>Enter your name:</p>
<input
type='text'
name='username'
onChange={this.myChangeHandler}
/>
<p>Enter your age:</p>
<input
type='text'
name='age'
onChange={this.myChangeHandler}
/>
</form>
);
}
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
در اینجا با دستورات event.target.name
و event.target.value
به فیلد و مقدارش دسترسی پیدا می کنیم.همچنین در onChange
می توانیم متد های مختلف قرار دهیم که در اینجا هر دو یک متد فراخوانی می کنند.
- فرشته حقیقی 4 سال قبل پاسخ داد
- آخرین ویرایش 4 سال قبل
- شما باید برای ارسال دیدگاه وارد شوید