在输入和按钮的基础中添加必需的答案

【问题标题】：Adding a required in a basic for of an input and button在输入和按钮的基础中添加必需的
【发布时间】：2020-08-04 03:53:20
【问题描述】：

我试图在我的表单上添加一个必需的元素（如果里面没有文本，则当框变为红色时）但没有成功，我安装了 react-strap，Bootstrap。当我应用许多更改时，它无缘无故地不起作用如果有人知道我为什么会高兴，它就是不动。

render() {
return (
  <div>
    <form class="needs-validation" novalidate>
      <InputGroup size="sm">
        <InputGroupAddon addonType="append" className="m-2">
          <Input
            className="form-control"
            placeholder="Add a new To-Do. "
            onChange={(e) => this.updateInput(e.target.value)}
            value={this.state.input}
            onKeyPress={this.handleKeyPress}
            required
          />
          <Button
            color="primary"
            size="sm"
            className="add-todo"
            onClick={this.handleAddTodo}
          >
            Add
          </Button>
        </InputGroupAddon>
      </InputGroup>
    </form>
  </div>
);
}

export default connect(null, { addTodo })(AddTodo);
// export default AddTodo;

【问题讨论】：

跟引导无关。你用过required = true吗？

标签： css reactjs bootstrap-4

【解决方案1】：

您正在做的是将required 作为道具传递给您的班级Input。您需要在字段呈现时添加html标签，即在Input.js：

return (
    <input ... required={this.props.required}>
)

【讨论】：

【解决方案2】：

如果该字段为空，我认为您应该将 'is-invalid' 类添加到输入元素。

https://getbootstrap.com/docs/4.0/components/forms/?#server-side

【讨论】：