Question

我正在尝试与子组件进行通信，但仅在onChange html元素中发生<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

您想象React事件起作用的方式，在React中不起作用，抱歉：（

在React中，要有条件地渲染某些东西，该条件必须“在渲染内部”，并且必须取决于状态或提供给组件的道具。

我们只需要更改父组件，您可以尝试：

import React from "react";
import FileUpload from "./FileUpload";

class App extends React.Component {
  // Because we need the App component to "change itself",
  // we add the variable the condition is based on to the state.
  // (in this case, if a file has been selected)
  state = {
    selected_file: null
  };

  render() {
    return (
      <div>
        <div>Hey</div>
        <input
          type="file"
          id="my-file"
          multiple
          onChange={event => {
            // When the event happens, update the state with the file from the input
            this.setState({
              selected_file: event.target.files[0]
            });
          }}
        />

        {/* Only if the file != null (so a file is selected) do we render */}
        {this.state.selected_file != null && (
          <FileUpload
            // I didn't know where `this.displayOnUpload` should come from, so I commented it out
            //displayOnUpload={this.displayOnUpload}
            test="passed succesfully"
            // Pass the file to the child component, so it can use it
            file={this.state.selected_file}
          />
        )}
      </div>
    );
  }
}

export default App;

我希望这些评论能使您了解其工作原理：）

如果没有，我将从React课程开始，因为React状态是一个刚入门时需要掌握的概念。我在Stack Overflow帖子中教的不够多！

Answer 2

onChange将调用方法（函数），但不会呈现任何内容。您可以使用状态有条件地渲染组件。

import React from 'react';
import FileUpload from './FileUpload'


class App extends React.Component {

    state = {
        fileChanged = false
    }

    callChild = ()=>{
        this.setState({ fileChanged: true })
    }

    render(){

        if (this.state.fileChanged) {
            return <FileUpload displayOnUpload = {this.displayOnUpload} test = 'passed succesfully'/>
        }

        return ( 
            <div>

                <input 
                    type="file"
                    id = "my-file"
                    multiple 
                    onChange = {()=>this.callChild()} 
                />                                    


            </div>

        )
    }

}

export default App

在onChange事件之后有条件地呈现子组件

2 个答案: