新年快乐! 我正在尝试将类子组件用作功能组件,但我不知道如何使用 props。 我有一个图片类组件,我将它导入到我的 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>
);
}
任何帮助或提示都非常宝贵。 谢谢大家!
答案 0 :(得分:0)
这是我自己做的,我会告诉你我是怎么做到的:
我的图片架构:
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);