Добавление необходимого в базу c для ввода и кнопки

Question

Я попытался добавить требуемый элемент (когда поле станет красным, если внутри не текст) в свою форму, но безуспешно, я установил 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;

Answer 1

я думаю, вам следует добавить класс 'is-invalid' к элементу ввода, если это поле пусто.

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

Answer 2

То, что вы делаете, передает required как опору вашему классу Input. Вам нужно добавить тег html при рендеринге поля, то есть в Input.js:

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