Question

我不确定这是否是一个反应问题，或更通用。我有一个带有父组件的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>
    )
}

窗体本质上是相同的（里面有逻辑来处理复选框vs选择）。这似乎是socketsio上基本聊天室应用程序的稍微复杂的版本。没有套接字和纯handleChanges，我可以与表单non stop进行交互。但是，每当我在套接字上收到新的JSON时，我的表单似乎就会锁定。

Answer 1

您的表单输入不具有value属性。该值应使用状态数据，该状态数据应由handleChange函数设置。表单输入甚至在提交之前就响应了吗？

<input value={this.state.someStateField} onChange = {() => this.props.handleChange(e)>

Answer 2

我修复了两个问题。一种是我的所有子组件和元素都没有唯一的键。这并不能解决我的问题，但是我知道这不仅是最佳做法，而且在React更新DOM时可能会导致意外行为。

更大的问题是我正在使用传入的道具生成子表单输入。这就是为什么表单在提交时确实进行了视觉更新的原因。但是，我应该做的是使用父状态生成子窗体。我使用componentDidUpdate来接收新的JSON时保持最新状态

表单（反应组件）在通过Websocket提交和刷新后无法使用

2 个答案: