如何從組件傳遞道具

Question

我如何將道具從選擇組件傳遞到我的應用程序 js

這是我的代碼：

 const HandleSelect = ()=> { const [selectedOption, setSelectedOption] = useState(); return( <div className="App"> <Select defaultValue={selectedOption} onChange={setSelectedOption} options={options} /> </div> ) } export default HandleSelect;

我試過

 const Select = (props) => { const { defaultValue, onChange, options } = props console.log(onChange); return ( <div> </div> ) } export default Select

但是在應用程序中，當我嘗試使用 console.log() 時，它們返回 undefined

對不起我的英語，我是法國人。

謝謝你的幫助。

Answer 1

像這樣分解你的道具

const Select = ({defaultValue, onChange, options}) => {
    return (
        <div>
          <p>{defaultValue}</p>
          <p>{onChange}</p>
          <p>{options}</p>
        </div>
    )
}
export default Select

或者你也可以這樣做

const Select = (props) => {
    return (
        <div>
          <p>{props.defaultValue}</p>
          <p>{props.onChange}</p>
          <p>{props.options}</p>
        </div>
    )
}
export default Select

Answer 2

這里我的應用程序初始我想使用選擇，它有很多代碼，抱歉！

 import React, { useState, useEffect } from 'react'; import '../App.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import { FiPlusCircle } from 'react-icons/fi'; import { InputGroup } from 'react-bootstrap'; import { FormControl } from 'react-bootstrap'; import { Button } from 'react-bootstrap'; import { useForm } from 'react-hook-form'; import ImageUpload from 'image-upload-react'; import { doc, setDoc, getDoc } from 'firebase/firestore'; import { decode as base64_decode, encode as base64_encode } from 'base-64'; import Select from './select'; // Initialize Cloud Firestore through Firebase import { initializeApp } from 'firebase/app'; import { getFirestore } from 'firebase/firestore'; const object1 = { title: 'Entrecôte', category: 'Viande', describe: 'Ici la description' }; const firebaseApp = initializeApp({ //my config }); const db = getFirestore(); const Initial = (props) => { const [ data, setData ] = useState(object1); const [ loadata, setLoadata ] = useState(); const [ imageSrc, setImageSrc ] = useState(); // form image source const [ encoded, setEncoded ] = useState(); // Value const [ title, setTitle ] = useState(''); // title const [ category, setCat ] = useState(''); // category const [ describe, setDesc ] = useState(''); // description const { register, handleSubmit, formState: { errors } } = useForm(); const onSubmit = (data) => setData(data); // set url data const handleImageSelect = (e) => { setImageSrc(URL.createObjectURL(e.target.files[0])); }; useEffect(() => { if (data) { //form only setTitle(data.title); setCat(data.category); setDesc(data.describe); addTodo(title, category, describe, encoded); // great ! } }, []); // write values to firebase database const addTodo = async () => { const response = await fetch(imageSrc); const blob = await response.blob(); var reader = new FileReader(); reader.onload = () => { setEncoded(reader.result); }; reader.readAsDataURL(blob); if (encoded && data) { await setDoc(doc(db, 'User', 'user000'), { category: category, title: title, describe: describe, image: encoded }); } }; function getScrollHeight(elm) { var savedValue = elm.value; elm.value = ''; elm._baseScrollHeight = elm.scrollHeight; elm.value = savedValue; } function onExpandableTextareaInput({ target: elm }) { // make sure the input event originated from a textarea and it's desired to be auto-expandable if (!elm.classList.contains('autoExpand') || !elm.nodeName === 'TEXTAREA') return; var minRows = elm.getAttribute('data-min-rows') | 0, rows; !elm._baseScrollHeight && getScrollHeight(elm); elm.rows = minRows; rows = Math.ceil((elm.scrollHeight - elm._baseScrollHeight) / 16); elm.rows = minRows + rows; } // global delegated event listener document.addEventListener('input', onExpandableTextareaInput); // Ici je veux retourner le produit (lecture) const getUser = async () => { const list = []; const docRef = doc(db, 'User', 'user000'); const docSnap = await getDoc(docRef); if (docSnap.exists()) { list.push(docSnap.data()); const newlist = list[0]; setLoadata(newlist); } else { console.log('No such document!'); } }; useEffect(() => { getUser(); }, []); // console.log('propsinou', props); return ( <div className="container-fluid css-selector m-0 p-0" style={{ height: '100vh' }}> <div className="row m-0 p-0"> <div className="col-12 row m-0"> {/* column card */} <div className="col-md-1 cardColor mt-5 text-center text-white size"> <h4 className="mt-3 mb-4"> Bienvenue </h4> <div className="round"> <FiPlusCircle size={40} /> </div> <p>Ajouter menu</p> </div> <div className="col-11 row space m-0 justify-content-center"> <h1 className="m-0 text-white text-center mt-5">Bienvenue sur votre Dashboard</h1> <div className="col-10 row m-0"> <h4 className="m-0 text-white p-3">Étape 1 : ajouter du contenu </h4> {/* First card */} <div className="col-3 text-center card"> {loadata ? ( <div class="container"> <h3 className="m-0 text-success p-3">Titre</h3> <InputGroup className="mb-3"> <InputGroup.Text id="basic-addon1">📌</InputGroup.Text> <FormControl placeholder={loadata.title} aria-label="Titre du menu" aria-describedby="basic-addon1" {...register('title')} // onChange={e=> // this.setState({ val: e.target.value })} /> </InputGroup> <h3 className="m-0 text-success">Catégorie</h3> <InputGroup className="mb-3 mt-3"> <InputGroup.Text id="basic-addon1">📜</InputGroup.Text> <FormControl placeholder={loadata.category} aria-label="Username" aria-describedby="basic-addon1" {...register('category')} // onChange={e=> // this.setState({ val: e.target.value })} /> </InputGroup> </div> ) : ( <div class="container"> <h3 className="m-0 text-success p-3">Titre</h3> <InputGroup className="mb-3"> <InputGroup.Text id="basic-addon1">📌</InputGroup.Text> <FormControl placeholder="titrent" aria-label="Titre du menu" aria-describedby="basic-addon1" {...register('title')} // onChange={e=> // this.setState({ val: e.target.value })} /> </InputGroup> <h3 className="m-0 text-success">Catégorie</h3> <InputGroup className="mb-3 mt-3"> <InputGroup.Text id="basic-addon1">📜</InputGroup.Text> <FormControl placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" {...register('category')} // onChange={e=> // this.setState({ val: e.target.value })} /> </InputGroup> </div> )} </div> <div className="col-3 card offset-1"> <div className="container"> <h3 className="m-0 text-success p-3 text-center">Description</h3> {loadata ? ( <textarea className="autoExpand" rows="3" data-min-rows="3" placeholder={loadata.describe} {...register('describe')} autoFocus /> ) : ( <textarea className="autoExpand" rows="3" data-min-rows="3" placeholder={'Entrez la description'} {...register('describe')} autoFocus /> )} </div> </div> <div className="col-3 offset-1 p-absolute"> <ImageUpload className="border-r" handleImageSelect={handleImageSelect} imageSrc={imageSrc} setImageSrc={setImageSrc} style={{ width: '100%', height: '100%', background: 'gold' }} /> </div> </div> <div className="col-10 row m-0"> <div className="col-3"></div> <h4 className="m-0 text-white p-3 mt-5">Étape 2 : Choisir la catégorie & valider </h4> {/* First card */} <div className="col-3 text-center card"> <div class="container"> <h3 className="m-0 text-success p-3">Catégorie</h3> <Select /> </div> </div> <div className="col-3 offset-1 text-center card"> <div class="container"> <h3 className="m-0 text-success p-3">Valider</h3> {/* <Button /> */} <Button variant="success" onClick={handleSubmit(onSubmit)}> Envoyer les données </Button>{' '} </div> </div> </div> </div> {/* Boutton Select*/} </div> </div> </div> ); }; export default Initial;