如何从ReactJs中的父组件访问子组件的输入值？

Question

我对输入值的访问有问题，这里使用的是.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;

Answer 1

有许多方法可以从子组件中获取父组件的值。您可以调用从父函数传递到子函数的函数，以便在更改后将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>
    );
} 

Answer 2

因此，您需要在父级中启动输入状态。

由于您正在通过问题数组进行映射以呈现QuestionLabel，所以我们可以尝试以下操作.

//..
const ParentComponent = () => {
  const [answers, setAnswers] = React.useState({})

  useEffect(() => {
    projectsData.projectDetail.questions.forEach((_, i) => {
      setAnswers(previousAnswers => {...previousAnswers, ["name" + i]: ""})
    })
  }, [])

  const handleAnswers = (e) => {
    setAnswers(previousAnswers => {...previousAnswers, [e.target.name]: [e.target.value]})
  }
//..

然后

//..
{
  projectsData.projectDetail.questions.map((question, i) => {
    return (
      <QuestionLabel questionTitle={question} inputName={"name" + i} answers={answers} handleAnswers={handleAnswers} />
    )
  })
}

最后..。

//child component
const QuestionLabel=(props)=>{

     return(
         <div className="contact">
            <form  className="contact-form" autocomplete="off">
                <div class="contact-form-group">
                    <label 
                        for={props.inputName}
                        class="contact-form-label"
                    >
                        {props.questionTitle}
                    </label>
                    <input 
                        id={props.inputName}
                        name={props.inputName} 
                        type="text" 
                        class="contact-form-input"
                        value={answers[props.inputName]}
                        onChange={handleAnswers}
                />
                </div>
                
            </form>
     </div>
     );
 }
 export default QuestionLabel;