Question

我是新来的人。我有一个表单，当我遇到输入错误时，我想让父组件知道。我尝试将变量myError用作道具，与使用next方法一样，但是不起作用。

基本上，当touched.email和errors.email为true时，我想使父组件中的error属性为true。另外，error需要留在道具中。我不想在那里使用State。

下面是我的子组件。

我希望这是有道理的。谢谢。

interface Props extends FormikProps<FormValues> {
    next(): void;
    myError: boolean;
}

function ErrorHandler(props: any & Props) {
   const touched = props.touched;
   const errors = props.errors;
   if (touched && errors) {
       //if this condition is true then I want to make myError true and send it as prop to the parent
       return  <div>
                <div className={style.error}>
                    { errors }
                </div>
            </div>
    } else {
      return <div></div>
  } 
}


const Step1 = (props: Props) => {
const { values, handleChange, handleBlur, touched, errors } = 
props;

return (
    <div>
            <input
                id='email' type='email' 
                value={values.email}
                autoFocus
                onChange={handleChange}
                onBlur={handleBlur}
            />

            <ErrorHandler touched={touched.email} errors={errors.email}/>



            <Button onClick={props.next}
                    type='button'
                    >
                    Next
            </Button>
    </div>
);
};

export default Step1;

这是我的父组件：

interface Props {
    next(): void;
    myError: boolean;
}

export class View extends React.Component< Props, {}> {

    render() {
        const {
            isSubmitting, isValidating, isValid,

            handleChange: handleSubmit,
        } = this.props; 

        return (
            <Form onSubmit={handleSubmit}>
                <div>
                    <Step1 {...this.props} next = {this.props.next} myError = {this.props.myEror} />       

                </div>
            </Form>
        );
    }
}

Answer 1

将函数从父组件传递到子组件，并在发生错误时调用

class Parent extends Component {
  ....
  onError(error) {
    console.log(error)
  }

  render() {
    <div>
      <Child onError={this.onError}/>
    </div>
  }
}

class Child extends Component {
      ....
  createError(error) {
    try {
      throw "Error"
    } catch(err) {
      this.props.onError(err)
    }
  }

  render() {
    <div>
      ...
    </div>
  }
}

如何将表单错误作为参数发送给父组件？

1 个答案: