表单作为具有反应的功能组件
Posted
技术标签:
【中文标题】表单作为具有反应的功能组件【英文标题】:Forms as functional components with react 【发布时间】:2019-04-30 08:50:56 【问题描述】:如果我想制作一个包含表单的功能组件,例如登录,并且我想在 App 组件中包含状态并且 Login 将是它的子组件,我可以使用中的表单来改变 App 中的状态吗?登录孩子?
【问题讨论】:
【参考方案1】:是的。将两个 props 一个对象 data
和一个方法 onChange
从 App
传递给 Login
。
data
将在Login
中设置表单的值。
如果Login
表单有任何变化,则使用更新的表单值触发onChange
。
在App
中处理它并更新其状态,然后将其向下传递到Login
作为data
。
【讨论】:
【参考方案2】:要从子组件修改父组件状态中的属性,您可以将函数作为 Prop 发送给子组件。
父组件:
class Parent extends React.Component
// Parent state
this.state =
someState: false
// This method will be sent to the child
handler = () =>
this.setState( someState: true );
// Set the action property with the handler as value
render()
return <Child action=this.handler />
子组件:
// onClick executes the handler function set by the parent component
const Child = ( action ) => (
<Button onClick=action />
);
【讨论】:
基于类的因此过时的答案【参考方案3】:是的,这是可能的。您只需要将道具传递给您的子组件。这是一个如何做的例子:
// in parent component
handleChange(updatedData)
this.setstate(
data: updatedData
)
// in render method
<Login handleChange=this.handleChange/>
// in child component
// calling the handleChange function
this.props.handleChange(newData)
【讨论】:
【参考方案4】:import React, useState from 'react';
function Submit()
const [inputField , setInputField] = useState(
first_name: '',
last_name: '',
gmail: ''
)
const inputsHandler = (e) =>
setInputField( [e.target.name]: e.target.value )
const submitButton = () =>
alert(inputField.first_name)
return (
<div>
<input
type="text"
name="first_name"
onChange=inputsHandler
placeholder="First Name"
value=inputField.first_name/>
<br/>
<input
type="text"
name="last_name"
onChange=inputsHandler
placeholder="First Name"
value=inputField.last_name/>
<br/>
<input
type="gmail"
name="gmail"
onChange=inputsHandler
placeholder="Gmail"
value=inputField.gmail/>
<br/>
<button onClick=submitButton>Submit Now</button>
</div>
)
export default Submit
【讨论】:
这很棒,但它会导致警告Warning: A component is changing a controlled input of type text to be uncontrolled
。在这里为我解决这个问题:***.com/questions/61378837/…【参考方案5】:
使用类似的东西
const payloadHandler = (e) =>
setPayload( ...inputField, [e.target.name]: e.target.value );
;
【讨论】:
这只是一个抛出的 sn-p 代码,没有对原始问题提供任何进一步的见解。【参考方案6】:Mehedi Setu
给出的解决方案将给出警告:一个组件正在将文本类型的受控输入更改为不受控制。
我是updating the code
那将remove
这个Warning
。
import React, useState from 'react';
function Submit()
const [inputField , setInputField] = useState(
first_name: '',
last_name: '',
gmail: ''
)
const inputsHandler = (e) =>
const name, value = e.target;
setInputField((prevState) => (
...prevState,
[name]: value,
));
const submitButton = () =>
alert(inputField.first_name)
return (
<div>
<input
type="text"
name="first_name"
onChange=inputsHandler
placeholder="First Name"
value=inputField.first_name/>
<br/>
<input
type="text"
name="last_name"
onChange=inputsHandler
placeholder="First Name"
value=inputField.last_name/>
<br/>
<input
type="gmail"
name="gmail"
onChange=inputsHandler
placeholder="Gmail"
value=inputField.gmail/>
<br/>
<button onClick=submitButton>Submit Now</button>
</div>
)
export default Submit
【讨论】:
以上是关于表单作为具有反应的功能组件的主要内容,如果未能解决你的问题,请参考以下文章