Question

我有一个React表单，其中有相当多的输入（15+并且正在增长）。目前有3个输入为required。我在我的Redux商店invalidForm中设置了一个值，默认设置为true。我有一个＆＃39;提交＆＃39;按钮，用于检查此invalidForm的状态，并相应地禁用或启用按钮。

我想要做的是在完成所有必需的输入后将invalidForm值设置为false。理想情况下，将编写解决方案，以便我可以将required属性添加到表单中的任何字段并使其仍然有效（Stack Overflow上有类似的问题，但它需要手动设置所有的状态必填项：How to disable form submit button until all input fields are filled?! ReactJS ES2015）。

我是React和Redux的新手，所以我仍然围绕着一些概念。如果我在jQuery中执行此操作，我想我会遍历所需的输入，将它们放入一个带有完成的＆＃39; key和完成时将此键设置为true。每次完成一次，我都会测试一下，看看阵列中的所有项目是否已经完成了＆＃39;设置为true，如果是，则启用提交按钮。

这是我的容器

class DrillCreator extends Component {
  render() {
    return (
      <div>
        <DrillCreatorPage
          setDrillTitle={this.props.setDrillTitleAction}
          getDrillTitle={this.props.drillCreator.title}
          setInvalidForm={this.props.invalidFormAction}
          getInvalidForm={this.props.drillCreator.invalidForm}
        />
      </div>
    );
  }
}

DrillCreator.propTypes = {
  setDrillTitleAction: PropTypes.func,
  drillCreator: PropTypes.object,
  invalidFormAction: PropTypes.func,
};

const mapDispatchToProps = dispatch => ({
  setDrillTitleAction: drillCreator => dispatch(setDrillTitle(drillCreator)),
  invalidFormAction: drillCreator => dispatch(invalidForm(drillCreator)),
});

const mapStateToProps = reduxState => ({
  drillCreator: reduxState.drillCreator,
});

export default connect(mapStateToProps, mapDispatchToProps)(DrillCreator);

这是我的主页面（＆＃39;提交＆＃39;按钮位于<EditHeader />组件中），所需的道具只是一个传递给相关输入组件的布尔值。

const DrillCreatorPage = (props) => {
  return (
    <div>
      <EditHeader drillTitle={props.getDrillTitle} invalidForm={props.getInvalidForm} />

      <form>
        <DrillCreationSection>
          <InputWithTooltip
            type="text"
            placeholderText="Title"
            tooltipText="Title Tooltip"
            required
            setDrillTitle={props.setDrillTitle}
          />

          <InputWithTooltip
            type="textarea"
            placeholderText="Summary"
            tooltipText="Summary Tooltip"
          />

          <InputWithTooltip
            type="checkbox"
            options={agesArray}
            placeholderText="Ages"
            tooltipText="Ages Tooltip"
            required
          />

          // etc. etc.
        </DrillCreationSection>
      </form>
    </div>
  );
}

如果完成所有必填字段，如何设置容器状态

0 个答案: