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

Posted 2023-02-23

【中文标题】将 props 从类组件传递到无状态组件

【英文标题】：Pass props from class component to stateless component

【发布时间】：2021-04-11 08:26:24

【问题描述】：

新年快乐！ 我正在尝试将类子组件用于功能组件，但我无法弄清楚如何使用道具。 我在我的 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 />
        </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>
    );

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

【参考方案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);