将 props 从类组件传递到无状态组件

Question

新年快乐！ 我正在尝试将类子组件用于功能组件，但我无法弄清楚如何使用道具。 我在我的 SignUp 无状态组件中导入了一个图片类组件，以便用户将图片与其他凭据一起上传并创建新的用户配置文件。

这是我的图片组件：

import React, { Component } from 'react';


export default class Picture extends Component {
constructor(props) {
    super(props);
    this.state={
        file:null
    }

    this.getFiles = this.getFiles.bind(this);
}

getFiles = (e) => {
    let file = e.target.files[0];
    console.log("filess::", file)
    let reader = new FileReader();
    const url= reader.readAsDataURL(file);
    reader.onload = (e) => {
        console.log("event::", e)
        console.log("result::",e.target.result)
        console.log("readerRes::", reader.result);
        this.props.cb(reader.result);
      this.setState({
          file:reader.result
      })
    };
}

render() {
    return(
        <div>
       Add Pic <input type="file" name="image" multiple={true} onChange={this.getFiles}/><br/>
        <img src={this.state.file} height="100"/>
        </div>
    )
}
}

我需要导入这个子组件并在我的 SignUp 无状态组件中使用它，但我不知道该怎么做。 您可以在下面找到我的功能组件。

import React from 'react';
import { Formik } from 'formik';
import * as yup from 'yup';
import Picture from './picture.js'

const signUpSchema = yup.object({
    nume: yup.string()
                .required()
                .min(4),
    email: yup.string()
                .required()
                .min(5),    
    password: yup.string()
                .required()
                .min(2), 
    picture: yup.string()
                .required()
                .min(5),
    passwordConfirmation: yup.string()
                .required()
                .oneOf([yup.ref('password')], 'Passwords must match'), 
});

function SignUp(props) {
    console.log("signUpProps::", props);
    let [esteUserAdaugat, seteazaUserulAdaugat] = React.useState(false);
    const addUserInDb = async (userDetails) => {
    console.log('is submit working:: ', userDetails);
    const url = 'http://localhost:3000/users';
    const response = await fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': '*/*'
        },
        body: JSON.stringify({...userDetails, pisici: []})
    });
    if( response.status === 400){
        seteazaUserulAdaugat(false);
    }
    if (response.status === 200) {
        seteazaUserulAdaugat(true);
        props.history.push("/users/")
    }
};
const initialValues ={
    nume: '',
    email: '', 
    password: '',
    picture:'',
    pisici:[],
    passwordConfirmation:''    
};
return (
  <div>
    Signup page
    <Formik 
        initialValues={
            initialValues
        }
        validationSchema={signUpSchema}
        onSubmit={(values, {resetForm})=>{
            addUserInDb(values);
            // getPic(pic);
            resetForm();
        }}
    >
        {
            (props) => {
                return (
                    <form onSubmit={props.handleSubmit}>
                        <input
                            type="text"
                            onChange={props.handleChange}
                            onBlur={props.handleBlur}
                            value={props.values.nume}
                            name="nume"
                            placeholder="name"
                        />
                        <input
                            type="text"
                            onChange={props.handleChange}
                            onBlur={props.handleBlur}
                            value={props.values.email}
                            name="email"
                            placeholder="email address"
                        />
                        <input
                            type="password"
                            onChange={props.handleChange}
                            onBlur={props.handleBlur}
                            value={props.values.password}
                            name="password"
                            placeholder="password"
                        />    
                        <input
                            type="password"
                            onChange={props.handleChange}
                            onBlur={props.handleBlur}
                            value={props.values.passwordConfirmation}
                            name="passwordConfirmation"
                            placeholder="Re-type password"
                        />                                                      
                        <button type="submit">Submit</button>
                        <div>{props.touched.nume && props.errors.nume}</div>
                        <div>{props.touched.email && props.errors.email}</div>
                        <div>{props.touched.password && props.errors.password}</div>
                        <div>{props.touched.passwordConfirmation && props.errors.passwordConfirmation}</div>

                        <ConfirmareAdaugareUserComponent wasUserAdded={esteUserAdaugat}/>                
                    </form>
                );
            }
        }
    </Formik>
  </div>

 );
}

export default SignUp;
  
function ConfirmareAdaugareUserComponent(props){
    const wasUserAdded = props.wasUserAdded;
    let confirmationValue = '';
    if (wasUserAdded) {
        confirmationValue = 'Userul a fost adaugat';
    } else {
        confirmationValue = "Please fill in the form to sign up."
    }
    return(
        <div>{confirmationValue}</div>
    );
}

非常重视任何帮助或提示。 谢谢大家！

Answer 1

这是我自己做的，我会告诉你我是怎么做到的：

我的图片架构：

image_select: Yup.mixed().test(
  "fileSize",
  `File too large ,should be lower than ${Math.floor(FILE_SIZE / 1000)}kb`,
  (value) =>
    value && typeof value === "object" ? value.size <= FILE_SIZE : true
);

要将其放在表单上，​​您应该使用 Formik Field（也建议用于其他输入）：

<Field
  name="image_select"
  component={Picture}
  image={initialValues.image_select}
  setFieldValue={setFieldValue}
  margin="normal"
  errorMessage={errors["image_select"] ? errors["image_select"] : undefined}
/>

在你的Picture 组件中你应该得到这样的道具：

const { errorMessage, classes, image, field } = this.props;

获取文件后也可以用这个函数设置ImageValue：

this.props.setFieldValue(this.props.field.name, file);