使用受控的表单元素来响应无状态组件？
使用受控的表单元素来响应无状态组件？
提问于 2017-03-26 04:10:46
我有一个哑/无状态组件，它只用于呈现一个表单，
只是一个典型的形式。
import React from 'react'
export const AuthorForm =
({ firstName , lastName , handlefnChange , handlelnChange}) => (
<form action="">
<h2>Manage Authors</h2>
<label htmlFor="firstName">First Name</label>
<input type="text" name="firstName"
value={firstName} onChange={handlefnChange} />
<br/>
<label htmlFor="lastName">Last Name</label>
<input type="text" name="lastName"
value={lastName} onChange={handlelnChange} />
<br/>
<input type="submit" value="save" />
</form>
)我从父智能组件控制此表单
，它只是呈现上层窗体组件，为值和事件处理程序传递道具。
import React , {Component} from 'react'
import {AuthorForm} from './'
export class ManageAuthors extends Component {
constructor(){
super()
this.state = {
author:{
id: "",
firstName:"",
lastName:""
}
}
}
handlefnChange = e => {
this.setState({
author:{
firstName: e.target.value
}
})
}
handlelnChange = e => {
this.setState({
author: {
lastName: e.target.value
}
})
}
render = () => (
<div>
<AuthorForm
{...this.state.author}
handlefnChange={this.handlefnChange}
handlelnChange={this.handlelnChange} />
</div>
)
}一切正常，但我收到警告
warning.js:36 Warning: AuthorForm is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://facebook.github.io/react/docs/forms.html#controlled-components
我可以在不转换为stateful组件的情况下解析此警告吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-03-26 04:28:28
这是因为当您修改firstName或lastName字段时，它们中的任何一个都会丢失：
handlefnChange = e => {
this.setState({
author: {
firstName: e.target.value
// lastName is missing!
}
});
}
handlelnChange = e => {
this.setState({
author: {
// firstName is missing!
lastName: e.target.value
}
})
}仅在this.state的顶层进行合并。因为firstName和lastName是嵌套在author对象中的，所以当您执行handlefn/lnChange而只设置其中一个字段时，另一个字段就会丢失。
解决办法是：
handlefnChange = e => {
this.setState({
author: {
firstName: e.target.value,
lastName: this.state.author.lastName
}
});
}
handlelnChange = e => {
this.setState({
author: {
firstName: this.state.author.firstName,
lastName: e.target.value
}
})
}或者，如果将来有两个以上的字段，那么使用spread运算符进行合并会更容易：
handlefnChange = e => {
this.setState({
author: {
...this.state.author,
firstName: e.target.value,
}
});
}
handlelnChange = e => {
this.setState({
author: {
...this.state.author,
lastName: e.target.value
}
})
}或者使用实用程序合并函数。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43024893
复制相关文章
相似问题
腾讯云开发者
