Question

当前在我的自定义组件上，我使用的SFC类似于：

export const InputField = field => (
  <div>
    <TextField required={field.required} invalid={field.meta.touched && !!field.meta.error}
     label={field.label} {...field.input} type={field.type} />
    {field.meta.touched && !!field.meta.error && (<TextFieldHelperText persistent
    validationMsg>{field.meta.error}</TextFieldHelperText>)}
  </div>
);

（这里的TextField和TextFieldHelperText是样式化的组件）。

这对只关心自己的文本输入很有用，但是在“密码”字段上紧随其后的是“密码确认”字段我不希望将该字段标记为无效，直到还触摸了“密码确认”字段...但是我无法弄清楚如何获得对密码确认字段的引用并本质上说：

invalid={field.meta.touched && otherField.meta.touched && !!field.meta.error}

我觉得我缺少明显的东西！

Answer 1

将两个字段都包装到包装器组件中，使用父组件的状态来存储有关触摸字段的信息，并在可能的情况下传递支持。像这样

FROM node:8.12.0-alpine as builder

#Now install angular cli globally
RUN npm install -g @angular/cli

RUN apk add --update git openssh

#create a new direcotry for the prj and change its directory to it
RUN mkdir ./test

#copy the package json #dont copy package.lock json now
COPY package.json package-lock.json ./adtech-prj/

#this is required to place all our files inside this directory
WORKDIR ./test

#this copies all files to the working directory
COPY . .

RUN ng set -g warnings.versionMismatch=false
RUN npm cache clear --force && npm i


#Build the angular app in production mode and store the artifacts in dist 
folder
RUN $(npm bin)/ng build --prod

### STAGE 2: Setup ###

FROM nginx:1.15-alpine
RUN apk update && apk add ca-certificates && rm -rf /var/cache/apk/*

COPY nginx.conf /etc/nginx/conf.d/


# create log dir configured in nginx.conf
RUN mkdir -p /var/log/app_engine

RUN mkdir -p /usr/share/nginx/_ah && \
echo "healthy" > /usr/share/nginx/_ah/health

## Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*


COPY --from=builder /adtech-prj/dist /usr/share/nginx/html


RUN chmod -R a+r /usr/share/nginx/html

现在您可以使用类似的东西

class PassFields extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      passTouched: false,
      passConfirmTouched: false,
    }
  }

  handlePassFocus = (e) => {
    this.setState({ passTouched: true })
  }

  handlePassConfirmFocus = (e) => {
    this.setState({ passConfirmTouched: true })
  }

  render() {
    const canBeValidated = this.state.passTouched && this.state.passConfirmTouched
    return (
        <div className="form">
            <PassField
                {...this.props}
                onFocus={this.handlePassFocus}
                canBeValidated={canBeValidated}
            />
            <PassConfirmField
                {...this.props}
                onFocus={this.handlePassConfirmFocus}
                canBeValidated={canBeValidated}
            />
        </div>
    )
  }
}

只有在两个字段都被触摸后，Redux形式的密码验证

1 个答案: