Question

我有一个文件上传小部件，一旦文件成功上传，它应该更改父级的状态，然后将组件切换为“处理中”。

但是我的当前状态代码给出错误：

期望了一个赋值或函数调用，而是看到了一个表达式没有未使用的表达式

在成功上传后，如何从fileUploadWidget更新父项的状态（UploadRequired）？

父母：

class UploadRequired extends Component {

    constructor(props) {
        super(props);
        this.state = {status: ""};
        this.handler = this.handler.bind(this);
      }

      handler() {
        this.setState({
           state: "0"
        });
    }
       componentWillReceiveProps = props => {
        this.setState({ status : props.dataRow });
}

    render() {

        var button = <div></div>;

        if(this.state.status == ""){
                button = <FileUploadWidget file={this.props.file} payrollID={this.props.payrollID} action={this.handler}/>;
              }

              if(this.state.status == "0"){
                button = <ProcessWidget />;
              }
              if(this.state.status == "1"){
                button = <ProcessingWidget />;
              }
              if(this.state.status == "2"){
                button = <ProcessedWidget />;
              }
        return(
            <div>
            {button}
            </div>
        )
    }
}
export default UploadRequired;

孩子：

class FileUploadWidget extends Component {

    constructor(props, context) {
        super(props, context);
    }
    componentDidMount() {

        var self=this;
        let fileName = this.props.file
        let payrollID = this.props.payrollID
        const inputElement = document.getElementById(this.props.file);
        if(inputElement){
        inputElement.addEventListener("change", handleFiles, true);
    }

    function handleFiles() {

        var self=this;
        const fileList = this.files; 
        const uri = "http://*******/fileupload.php";
        const xhr = new XMLHttpRequest();
        const fd = new FormData();

        xhr.open("POST", uri, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {

            // Error line here
               this.props.action
            }
            if (xhr.readyState == 4 && xhr.status == 400) {
              alert(xhr.responseText); 
            }
        };
        xhr.send(fd);
      }
      }

    render() {


        return (
            <div>
                <input type="file" id={this.props.file}></input> 
            </div>
        )
    }
}

Answer 1

const self = this;
const promise1 = new Promise(function(resolve, reject) {
  resolve(()=>{
 return  self.props.action()
})
});

await promise1()

console.log(promise1);

Answer 2

好吧，this.props.action只是处理程序函数，您不需要this.props.action()吗？

您还需要绑定handler，以便在调用this时使this.handler.bind(this)起作用：或将lambda传递给子组件action={() => this.handler()}

反应从孩子到父母的传递状态

2 个答案: