Блог

Я пытаюсь отключить кнопку отправки для моей формы. Я удалил большинство обработчиков, и входные данные принимаются для ввода «name», так что это понятнее. Ввод имени работает нормально, однако, когда я добавляю реквизит проверки к вводу имени и отключаю реквизит для кнопки отправки, кнопка по-прежнему остается активной. Чего мне не хватает?

     export class RecipeForm extends React.Component {

      onChange = e => {
        const { value, name } = e.target;
        this.setState({
          [name]: value
        });
      };

      // **** other function handlers here *****//


      required = value => {
        if (!value || value === '') {
          return 'This field is required';
        }
        return undefined;
      }

      render() {

        const { name } = this.state;
        const { submitSucceeded, handleSubmit, valid } = this.props;

        if (submitSucceeded) {  // submitSucceeded is a prop of redux form, boolean: true, and succeed to submit 
          alert("You have successfully added a new recipe")
          return <Redirect to='/your-menu' />
        }

        let newCategory;
        if (otherCheckbox) {
          newCategory = <NewCategory addNewCategory={this.addNewCategory} />;
        }



        return (
          <div className="form">
            <Alerts />

            <form onSubmit={handleSubmit(recipe => this.onSubmit(recipe))}>
              <h2>Add a new favorite recipe!</h2>

              <label htmlFor="name"> Recipe Name </label>
              <input
                name="name"
                id="name"
                type="text"
                label="Recipe Name"
                value={name}
                validate={[this.required]}
                onChange={this.onChange}
              />


              // **** other inputs here ***** ///
              

              <button type="submit"
                disabled={!this.props.valid}
              >Submit</button>
            </form>

            <br></br>
          </div>
        );
      }
    }

    const mapStateToProps = state => ({
      menuItems: state.menu.menuItems,
      categoryList: state.users.categoryList,
      userId: state.auth.id,
      authToken: state.auth.authToken
    });

    RecipeForm = connect(mapStateToProps)(RecipeForm);

    export default reduxForm({
      form: "recipe",
      onSubmitFail: (errors, dispatch) =>
        dispatch(focus("recipe", Object.keys(errors)[0]))
    })(RecipeForm);