如何修复不允许输入文本的表单？

Question

背景

自从我在 React-Router 中添加了 Switch 语句后，我的表单就失去了功能。我无法在输入框中键入内容，因此无法将新项目添加到我的数据库中。在此之前，我能够毫无问题地进行提取 post。

在我进行研究时，我查看了 this question 输入，但这并不是我所需要的，因为我想要我的输入接受文本。

表单有本地状态，但我尝试了 mapStateToProps 以防出现问题。在那里，我可以在我的 React 工具中看到正在捕获输入（尽管在它重新呈现之前只有一个字符）。

代码

这里是我设置路由的容器。

        <Switch>
          <Route exact path="/" render={(routerProps) => <Programs {...routerProps} programs={this.props.programs}/>} /> />
          <Route exact path='/programs' render={(routerProps) => <Programs {...routerProps} programs={this.props.programs}/>} />
          <Route path='/programs/new' render={(routerProps) => <ProgramInput {...routerProps} />}/>
          <Route path='/programs/:id' render={(routerProps) => <Program {...routerProps} programs={this.props.programs}/>}/>
          <Route exact path='/watchlist' render={(routerProps) => <Watchlist {...routerProps} programs={this.props.programs} />} />
        </Switch>

这是我表单上的三个输入之一。除了标签和值外，它们都是相同的。

        <Form.Input
                  fluid
                  label='Name'
                  value={this.state.name}
                  onChange={this.handleChange}
                  width={6} />

这是我输入中引用的 handleChange 方法。

  handleChange = event => {
    this.setState({
      [event.target.name]: event.target.value
    })
  }

我的目标

我想恢复我的表单的功能，以便 I/the 用户可以返回到数据库中添加项目。

Answer 1

您可能需要在输入

上定义一个名称属性

   <Form.Input
       fluid
       name="name"
       label='Name'
       value={this.state.name}
       onChange={this.handleChange}
       width={6} />

希望对您有所帮助

如何修复不允许输入文本的表单？

How to fix form that will not allow text to be entered?

reactjs

react-router

react-redux

semantic-ui-react

背景

代码

我的目标