企业官网建设流程全解析

广州房地产网站建设方案,网络营销推广工作内容,网站设计版式,整合营销的案例React 表单与事件 本章节我们将讨论如何在 React 中使用表单。HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态。在 HTML 当中#xff0c;像 input, textarea, 和 select 这类表单元素会维持自身状态#xff0…React 表单与事件本章节我们将讨论如何在 React 中使用表单。HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态。在 HTML 当中像 input, textarea, 和 select 这类表单元素会维持自身状态并根据用户输入进行更新。但在React中可变的状态通常保存在组件的状态属性中并且只能用 setState() 方法进行更新。xiaoheihe.cn/app/bbs/link/172990223xiaoheihe.cn/app/bbs/link/172990292xiaoheihe.cn/app/bbs/link/172990366一个简单的实例在实例中我们设置了输入框 input 值 value {this.state.data}。在输入框值发生变化时我们可以更新 state。我们可以使用 onChange 事件来监听 input 的变化并修改 state。React 实例class HelloMessage extends React.Component {constructor(props) {super(props);this.state {value: Hello Runoob!};this.handleChange this.handleChange.bind(this);}handleChange(event) {this.setState({value: event.target.value});}render() {var value this.state.value;return divinput typetext value{value} onChange{this.handleChange} /h4{value}/h4/div;}}const root ReactDOM.createRoot(document.getElementById(root));root.render(HelloMessage /);尝试一下 »上面的代码将渲染出一个值为 Hello Runoob! 的 input 元素并通过 onChange 事件响应更新用户输入的值。实例 2在以下实例中我们将为大家演示如何在子组件上使用表单。 onChange 方法将触发 state 的更新并将更新的值传递到子组件的输入框的 value 上来重新渲染界面。你需要在父组件通过创建事件句柄 (handleChange) 并作为 prop (updateStateProp) 传递到你的子组件上。React 实例class Content extends React.Component {render() {return (divinput typetext value{this.props.myDataProp} onChange{this.props.updateStateProp} /h4{this.props.myDataProp}/h4/div);}}class HelloMessage extends React.Component {constructor(props) {super(props);this.state { value: Hello Runoob! };this.handleChange this.handleChange.bind(this);}handleChange(event) {this.setState({ value: event.target.value });}render() {var value this.state.value;return (divContent myDataProp{value} updateStateProp{this.handleChange} //div);}}const root ReactDOM.createRoot(document.getElementById(root));root.render(HelloMessage /);尝试一下 »Select 下拉菜单在 React 中不使用 selected 属性而在根 select 标签上用 value 属性来表示选中项。React 实例class FlavorForm extends React.Component {constructor(props) {super(props);this.state {value: coconut};this.handleChange this.handleChange.bind(this);this.handleSubmit this.handleSubmit.bind(this);}handleChange(event) {this.setState({value: event.target.value});}handleSubmit(event) {alert(Your favorite flavor is: this.state.value);event.preventDefault();}render() {return (form onSubmit{this.handleSubmit}label选择您最喜欢的网站select value{this.state.value} onChange{this.handleChange}option valueggGoogle/optionoption valuernRunoob/optionoption valuetbTaobao/optionoption valuefbFacebook/option/select/labelinput typesubmit value提交 //form);}}const root ReactDOM.createRoot(document.getElementById(root));root.render(FlavorForm /);尝试一下 »多个表单当你有处理多个 input 元素时你可以通过给每个元素添加一个 name 属性来让处理函数根据 event.target.name 的值来选择做什么。React 实例class Reservation extends React.Component {constructor(props) {super(props);this.state {isGoing: true,numberOfGuests: 2};this.handleInputChange this.handleInputChange.bind(this);}handleInputChange(event) {const target event.target;const value target.type checkbox ? target.checked : target.value;const name target.name;this.setState({[name]: value});}render() {return (formlabel是否离开:inputnameisGoingtypecheckboxchecked{this.state.isGoing}onChange{this.handleInputChange} //labelbr /label访客数:inputnamenumberOfGueststypenumbervalue{this.state.numberOfGuests}onChange{this.handleInputChange} //label/form);}}尝试一下 »React 事件以下实例演示通过 onClick 事件来修改数据React 实例class HelloMessage extends React.Component {constructor(props) {super(props);this.state {value: Hello Runoob!};this.handleChange this.handleChange.bind(this);}handleChange(event) {this.setState({value: 菜鸟教程})}render() {var value this.state.value;return divbutton onClick{this.handleChange}点我/buttonh4{value}/h4/div;}}const root ReactDOM.createRoot(document.getElementById(root));root.render(HelloMessage /);尝试一下 »当你需要从子组件中更新父组件的 state 时你需要在父组件通过创建事件句柄 (handleChange) 并作为 prop (updateStateProp) 传递到你的子组件上。实例如下React 实例class Content extends React.Component {render() {return divbutton onClick {this.props.updateStateProp}点我/buttonh4{this.props.myDataProp}/h4/div}}class HelloMessage extends React.Component {constructor(props) {super(props);this.state {value: Hello Runoob!};this.handleChange this.handleChange.bind(this);}handleChange(event) {this.setState({value: 菜鸟教程})}render() {var value this.state.value;return divContent myDataProp {value}updateStateProp {this.handleChange}/Content/div;}}const root ReactDOM.createRoot(document.getElementById(root));root.render(HelloMessage /);尝试一下 »React AJAXReact Refs1 篇笔记 写笔记杨笑117***1030qq.com51父组件和子组件都用表单:class HelloMessageChild extends React.Component {render(){return divinput typetext value{this.props.myDataProp} onChange{this.props.updateStateProp} /h4子组件显示{this.props.myDataProp}/h4/div;}}class HelloMessage extends React.Component {constructor(props) {super(props);this.state {value: 父组件,value1:子组件};this.handleChange this.handleChange.bind(this);this.handleChange1 this.handleChange1.bind(this);}handleChange(event) {this.setState({value: event.target.value});}handleChange1(event) {this.setState({value1: event.target.value});}render() {var value this.state.value;var value1 this.state.value1;return divtabletbodytrtdinput typetext value{value} onChange{this.handleChange} /h4父组件显示{value}/h4/tdtdHelloMessageChild myDataProp {value1} updateStateProp {this.handleChange1} //td/tr/tbody/table/div}}ReactDOM.render(HelloMessage /,document.getElementById(formexmple));