ReactJsの親コンポーネントから子コンポーネントの入力値にアクセスするにはどうすればよいですか？

debugcn 投稿 Dev

TrNgTien

入力値へのアクセスに問題があります。ここで使用したのは.map（）です。これがコードで<QuestionLabel/>、子コンポーネントです。projectsData.projectDetail利用可能なデータです

//..
{projectsData.projectDetail.questions.map((question) => (
                    <QuestionLabel
                        questionTitle={question}  
                    />
                ))}


//child component
const QuestionLabel=(props)=>{
    const [answerInput, setAnswerInput] = React.useState("");
     return(
         <div className="contact">
            <form  className="contact-form" autocomplete="off">
                <div class="contact-form-group">
                    <label 
                        for="name" 
                        class="contact-form-label"
                    >
                        {props.questionTitle}
                    </label>
                    <input 
                        id="name" 
                        type="text" 
                        class="contact-form-input"
                        value={answerInput}
                        onChange={(answer) => setAnswerInput(answer.target.value)}

                />
                </div>
                
            </form>
     </div>
     );
 }
 export default QuestionLabel;

ヴィエット・ディン

親コンポーネントの子コンポーネントから値を取得する方法はたくさんあります。親から子への関数パスを呼び出して、変更さvalueれたparent stateときに設定できます。例：

const ParentComponent =(props)=>{
    const [valueFromChild, setValueFromChild] = useState('');

    return <>
        {valueFromChild}
        <QuestionLabel questionTitle={'Title'} setValueFromChild={setValueFromChild}/>
        </>
}

const QuestionLabel=(props)=>{
    const [answerInput, setAnswerInput] = React.useState("")

    useEffect(() => {
        props.setValueFromChild(answerInput);
    }, [answerInput]);

    return(
        <div className="contact">
            <form  className="contact-form" autoComplete="off">
                <div class="contact-form-group">
                    <label
                        for="name"
                        class="contact-form-label"
                    >
                        {props.questionTitle}
                    </label>
                    <input
                        id="name"
                        type="text"
                        class="contact-form-input"
                        value={answerInput}
                        onChange={(answer) => setAnswerInput(answer.target.value)}
                    />
                </div>

            </form>
        </div>
    );
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]