在 onChange 事件之后有条件地渲染子组件

Question

我正在尝试与子组件通信，但只关注html 元素中的onChange事件<input>。谁能向我解释为什么这两个组件似乎没有通信，以及为什么子组件中的 console.log 没有显示？

家长

import React from 'react';

import FileUpload from './FileUpload'

class App extends React.Component {

    callChild = ()=>{

        return (

            <FileUpload displayOnUpload = {this.displayOnUpload} test = 'passed succesfully'/>  

        )   

    }

    render(){

        return ( 

            <div>

                <input 

                    type="file"

                    id = "my-file"

                    multiple 

                    onChange = {()=>this.callChild()} 

                />                                    

            </div>

        )

    }

}

export default App

孩子

const FileUpload =  (props)=> {

        console.log(props.test)

    return (

        <div>

            hi

        </div>

    )

}

export default FileUpload

Answer 1

onChange 将调用一个方法（函数）但不会呈现任何内容。您可以使用状态有条件地渲染组件。import React from 'react';import FileUpload from './FileUpload'class App extends React.Component {&nbsp; &nbsp; state = {&nbsp; &nbsp; &nbsp; &nbsp; fileChanged = false&nbsp; &nbsp; }&nbsp; &nbsp; callChild = ()=>{&nbsp; &nbsp; &nbsp; &nbsp; this.setState({ fileChanged: true })&nbsp; &nbsp; }&nbsp; &nbsp; render(){&nbsp; &nbsp; &nbsp; &nbsp; if (this.state.fileChanged) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return <FileUpload displayOnUpload = {this.displayOnUpload} test = 'passed succesfully'/>&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="file"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id = "my-file"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; multiple&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange = {()=>this.callChild()}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }}export default App

Answer 2

你想象的 React 事件的工作方式在 React 中不起作用，抱歉:(在 React 中，要有条件地渲染某些东西，条件必须“在渲染内部”，并且必须依赖于状态或提供给组件的道具。我们只需要改变父组件，你可以尝试：import React from "react";import FileUpload from "./FileUpload";class App extends React.Component {&nbsp; // Because we need the App component to "change itself",&nbsp; // we add the variable the condition is based on to the state.&nbsp; // (in this case, if a file has been selected)&nbsp; state = {&nbsp; &nbsp; selected_file: null&nbsp; };&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <div>Hey</div>&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="file"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id="my-file"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; multiple&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={event => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // When the event happens, update the state with the file from the input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selected_file: event.target.files[0]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; {/* Only if the file != null (so a file is selected) do we render */}&nbsp; &nbsp; &nbsp; &nbsp; {this.state.selected_file != null && (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <FileUpload&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // I didn't know where `this.displayOnUpload` should come from, so I commented it out&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //displayOnUpload={this.displayOnUpload}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test="passed succesfully"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Pass the file to the child component, so it can use it&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; file={this.state.selected_file}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}export default App;我希望评论能让你了解它是如何工作的:)如果没有，我会从 React 课程开始，因为 React 状态是一个在你开始时需要掌握的概念。我无法在 Stack Overflow 的帖子中教你这么好！