为什么在react组件中调用printJS()失败？

Question

我试图调用react组件中的printJS，但是当我单击button.Then时，它没有工作，我修改了代码，如下所示。

 <button  onClick={printJS({printable:'docs/test.pdf',type:'pdf'})}>
                Print {this.state.type} with Message
 </button>

当我第一次打开页面时，它会自动工作，但是单击按钮仍然无效。

import React from 'react';
import printJS from 'print-js';


class PrintButton extends React.Component{

    constructor(props){
        super(props);
        this.state={
            name:'',
            type:'pdf',
        };
        this.handleNameChange=this.handleNameChange.bind(this);
        this.handleTypeChange=this.handleTypeChange.bind(this);
        this.print=this.print.bind(this);
    }

    handleNameChange(e){
        this.setState({name:e.target.value});
    }
    handleTypeChange(e){
        this.setState({type:e.target.value});
    }

    print(){
        let url;
        if(this.state.type==='pdf'){
            url=`docs/${this.state.name}`;
        }else if(this.state.type==='image'){
            url=`images/${this.state.name}`;
        }else if(this.state.type==='html'){
            url=`${this.state.name}`;
        }else{
            url=this.state.name;
        }
        printJS({printable:url,type:this.state.type});
    } 

    render(){
        return(
         <form>
            <label>
                选择类型:
                <select value={this.state.type} onChange={this.handleTypeChange}>
                <option value="pdf">PDF</option>
                <option value="image">IMAGE</option>
                <option value="html">HTML</option>
                <option value="json">JSON</option>
                </select>
            </label>
            <input value={this.state.name} type='text' onChange={this.handleNameChange}/>
            <button  onClick={this.print}>
                Print {this.state.type} with Message
            </button>
         </form>
        );

    }
}

export default PrintButton;

我想设计一个可打印的反应组件。

Answer 1

问题似乎是，在一个button中有一个form。由于您没有为type指定按钮属性，所以默认值是submit

提交:按钮将表单数据提交给服务器。如果没有指定属性，或者属性被动态更改为空值或无效值，则这是默认的。

因此，当您单击按钮时，您将提交表单。您可以通过在单击preventDefault上调用event来避免这种情况。

 print(ev){
    let url;

    ev.preventDefault();

    if(this.state.type==='pdf'){
        url=`docs/${this.state.name}`;
    }else if(this.state.type==='image'){
        url=`images/${this.state.name}`;
    }else if(this.state.type==='html'){
        url=`${this.state.name}`;
    }else{
        url=this.state.name;
    }
    printJS({printable:url,type:this.state.type});
}