如何将信息从可重用输入发送到 React 中的其他组件

Question

我在不同的组件中有不同的形式。还有一个输入，我在这些组件中重复使用。如果用户在一个组件中写了smth，另一个组件也应该显示这个文本。而且我不知道如何将此信息发送到其他组件。

const InputComponent = () => {
  const [isInput, setisInput] = useState("");
  const changeInput = (event: ChangeEvent<HTMLInputElement>) => {
    setIsInput(event.target.value);
  };
  return <input type="text" value="isInput" onChange={changeInput} />;
};

然后我需要在其他组件中反映输入的文本。

const AnotherComponent = () => {
  return (
    <>
      <InputComponent />
      <button>send</button>
    </>
  );
};

Answer 1

您有两个主要选择：

在 AnotherComponent 中定义 useState 并发送一个 setisInput 作为参数给 InputComponent
使用全局存储，例如useContext 或 useSelector（如果您使用的是 redux）。然后，您可以在应用程序的任何位置访问这些数据。

Answer 2

我认为一个很好的方法是将回调处理程序作为属性传递。

class AnotherComponent extends Component {
    constructor(props){
        super(props);
        this.updateView = this.updateView.bind(this);
    }
    
    updateView(someValue){
         // Do something with someValue
    }
    
    render(){
         return(
             <>
                 <InputComponent updateView={this.updateView} />
                 <button>send</button>
             </>
        );
    }
}

const InputComponent = (props) => {
   const [isInput, setisInput] = useState("");
   const changeInput = (event: ChangeEvent<HTMLInputElement>) => {
       setIsInput(event.target.value);
       
       // This line here
       this.props.updateView(event.target.value);
   };
   return <input type="text" value="isInput" onChange={changeInput} />;
};

应该可以。我没有更改您的 setIsInput()，但我认为您不需要那个。

您可以查看文档here and also this可能会有帮助。

如何将信息从可重用输入发送到 React 中的其他组件

How to send info from a reusable input to the other components in React

input

reactjs

react-props