Почему вызывается printJS () в компоненте реагирования? - PullRequest
Новая
       21

Почему вызывается printJS () в компоненте реагирования?

0 голосов
/ 15 мая 2019

Я попытался вызвать 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;

я хочу создать реактивный компонент для печати

1 Ответ

0 голосов
/ 15 мая 2019

Кажется, проблема в том, что у вас есть button внутри form.Поскольку вы не указываете атрибут type для кнопки , значением по умолчанию является submit:

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