具有输入栏的组件获取从另一个组件复制的值

Question

我有一个 App 组件，其中包含另外两个组件（A 和 B），它们应该是带有 <input type = "text"> 标签的搜索栏。 App 组件有两个函数，fetchA() 和 fetchB()，它们作为 props 传递给 A 和 B，并在各自的 <input> 标签中附加到 onChange 事件处理程序。因此，每当搜索栏中的文本输入发生变化时，都会调用它们在 App 组件中的相应函数。

const App = ()=>{
 //...some code

 functionA(term) {
   //...some code
 }

 functionB(term) {
   //...some code
 }

 return(
  <div>
   <A runWhenChanged = {functionA} />
   <B runWhenChanged = {functionB} />
  </div>
 )
}
 //... some code

A.js

const A = ({runWhenChanged})=>{
 const [term,setTerm] = useState('');

 const runOnChange = (event)=>{
  setTerm(event.target.value);
  runWhenChanged(term);
 }

return(<div>
<input type = "text" onChange = {runOnChange} value = {term}/>
</div>
);
}

//...

B.js（和 A.js 差不多）

const B = ({ runWhenChanged }) => {
    const [term, setTerm] = useState('');

    const runOnChange = (event) => {
        setTerm(event.target.value);
        runWhenChanged(term);
    }

    return (
        <div>
            <input type="text" onChange={runOnChange} value={term}></input>
        </div>
    )
}

//...

这里的问题是，在第一次呈现时，当一个人在第一个搜索栏（由 A.js 呈现的那个）中键入内容然后单击页面上的 anywhere 时，键入的文本会自动复制到第二个搜索栏（由 B.js 呈现的那个）。我不明白这怎么可能发生。

编辑：

我了解我定义的代码本身可以正常工作。所以，我将添加一些关于我在回调函数中所做的更多细节。

const App = ()=>{
 //...some code
 const [termA,setTermA] = useState('');
 const [termB,setTermB] = useState('');

 useEffect(()=>{
  //Returns an array using JavaScript's filter() function on an array of objects by 
  //checking if both the terms match the values of two particular keys in every 
  //object of the array 
 },[termA,termB]);

 functionA(term) {
   setTermA(term);
 }

 functionB(term) {
   setTermB(term);
 }

 return(
  <div>
   <A runWhenChanged = {functionA} />
   <B runWhenChanged = {functionB} />
  </div>
 )
}
 //... some code

Answer 1

我查看了您在此处粘贴的代码，发现以下内容：

const App = ()=>{
//...some code
    
  functionA() {
   //...some code
  }
    
  functionA() {
   //...some code
  }
    
  return(
    <div>
      <A runWhenChanged = {functionA} />
      <B runWhenChanged = {functionB} />
    </div>
  )
}
//... some code

在这里，我不知道这是您编辑帖子时的错误还是您的代码的文字副本。但是在函数声明中，您有两个名为 functionA 的函数。没有 functionB 被传递给 B 组件，因此您传递的是未声明的函数。 我建议检查一下并将这些函数转换为箭头函数。

constant B = ({runWhenChanged})=>{
  const [term,setTerm] = useState('');
    
  constant runOnChange = (event)=>{
    setTerm(event.target.value);
    runWhenChanged(term);
  }
    
  return(
    <div>
      <input type = "text" onChange = {runOnChange} value = {term}/>
    <div>
  );
 }

对于下一段代码，我看到您使用常量声明了您的组件，并且还使用了 runOnChange；您应该将其切换为 const。返回时，div 没有正确关闭的标签。

除此之外，我认为问题在于函数声明、它们内部调用的内容或它们如何传递给组件。我复制了您的代码，应用了我刚刚编写的观察结果，一切正常。这是我的代码：

应用组件：

import React from "react";

import A from "./A";
import B from "./B";

function App() {

  const functionA = () => {
    console.log("Changed value in A");
  }
 
  const functionB = () => {
    console.log("Changed value in B");
  }


  return (
    <div>
      <A runWhenChanged = {functionA} />
      <B runWhenChanged = {functionB} />
    </div>
  );
}

export default App;

一个组件：

import React, { useState } from "react";

const A = ({runWhenChanged}) => {
  const [term,setTerm] = useState('');
 
  const runOnChange = (event)=>{
   setTerm(event.target.value);
   runWhenChanged(term);
  }
 
  return(
    <div>
      <input type = "text" onChange = {runOnChange} value = {term}/>
    </div>
  );
 }

 export default A;

B 组件：

import React, { useState } from "react";

const B = ({runWhenChanged}) => {
  const [term,setTerm] = useState('');
 
  const runOnChange = (event) =>{
    setTerm(event.target.value);
    runWhenChanged(term);
  }
 
 return(
    <div>
      <input type = "text" onChange = {runOnChange} value = {term}/>
    </div>
  );
 }
 
 export default B;