[英]Form (react component) is unusable after submission and refresh via websockets
我不确定这是否是一个反应性的问题,或更通用。 我有一个带有父组件的React应用程序,该组件连接到socketsio服务器以发送/接收JSON。 JSON被分解为较小的JSON,然后传递给生成表单的子组件(FormA / FormB)。 父组件还将一个handleSubmit方法传递给子组件,以便在提交任何一种表单时,整个JSON都将发送到websockets服务器。
打开两个浏览器后,提交后,我可以看到新的JSON信息已接收并传递给子组件-以及每个组件/表单的更新。 但是,在此更新之后,我随后无法与表单进行交互(复选框和下拉菜单)。 但是,我仍然可以提交相同的表格。
请原谅伪代码。 我的应用程序实际上要复杂一些,而子组件实际上嵌套了3次,因为JSON多次分解。 handleSumbit一直向下传递。 我是js / html和React的新手,所以我想知道是否有已知原因导致表单无法使用,所以我可以从那里对代码进行故障排除。
class Parent extends Component
constructor() {
super()
this.state = {
data: [],
socket: null,
}
}
handleSubmit = (event) => {
event.preventDefault()
this.state.socket.emit("messageOut", this.state.data)
}
componentDidMount() {
this.props.socket.on('messageIn', (msg) => {
this.setState({
data: msg
})
})
this.setState({
socket: this.props.socket
})
}
handlChange() {
//handle changes to form for child components
}
render() {
return (
//form A props.data = this.state.data[0], props.handleSubmit = this.handleSubmit
//Form B props.data = this.state.data[1], props.handleSubmit = this.handleSubmit
)
}
}
class Form extends Component {
render() {
return (
<form onSubmit={this.props.handleSubmit} >
{this.props.data.map((item) =>
<input value = item.value name = item.name onChange = this.props.handleChange>
}
</form>
)
}
形式本质上是相同的(其中有逻辑来处理复选框与选择)。 这似乎是socketsio上基本聊天室应用程序的稍微复杂的版本。 没有套接字和纯handleChanges,我可以与表单non stop进行交互。 但是,每当我在套接字上收到新的JSON时,我的表单似乎就会锁定。
您的表单输入没有value属性。 该值应使用状态数据,该状态数据应由handleChange函数设置。 表单输入甚至在提交之前就响应了吗?
<input value={this.state.someStateField} onChange = {() => this.props.handleChange(e)>
我修复了两个问题。 一种是我的所有子组件和元素都没有唯一的键。 这不能解决我的问题,但是我知道这不仅是最佳实践,而且当react更新DOM时可能会导致意外行为。
我更大的问题是我正在使用传入的道具生成子表单输入。 这就是为什么表单在提交时确实进行了视觉更新的原因。 但是,我应该做的是使用父状态生成子窗体。 我使用componentDidUpdate来接收新的JSON时保持状态为最新
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.