Question

我试图在react Component中调用printJS，但是当我单击按钮时它不起作用。然后我修改了代码，如下所示。

 <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;

我想设计一个可打印的React组件

Answer 1

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

提交：该按钮将表单数据提交到服务器。如果未指定该属性，或者该属性动态更改为空值或无效值，则为默认设置。

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

 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});
}

为什么在react组件中调用printJS（）失败？

1 个答案: