Реакция (компонент) метода onClick с параметром

У меня есть проблема ввода параметра в функцию. Я пробовал несколько решений, которые я нашел здесь в Stack Overflow, но безуспешно.

Вот мой код:

function mapStateToProps(store) { return { un: store.measurement.unsaved, pat: store.patient.patients }; }

class MeasUnsaved extends Component{
    constructor(){
        super();
        this.showBtn = this.showBtn.bind(this);
        this.findPat = this.findPat.bind(this); this.createObj = this.createObj.bind(this);}
    findPat(id){
        let ps = this.props.pat.filter( p => (p.id === id) );
        return ps[0];
    }
    createObj(){
        let meas = [], i=0;
        this.props.un.forEach( u => {
            let pat = this.findPat(u.patId);
            let k = { date: u.date, fnote: u.fnote, patId: u.patId, name: pat.lastName+' '+pat.name, pos: i };
            i++;
            meas.push(k);
        });
        return meas;
    }
    showBtn(val){
        console.log(val);
    }
    render(){
        const unsaved = this.createObj();
        return (
            <Well>
                <fieldset>
                    <legend>Unsaved Measurement</legend>
                    <p>Unsaved Meas. will be lost after logout.</p>
                    {this.props.un.length === 0 && <p> You have 0 unsaved measurement </p>}
                    {this.props.un.length > 0 &&
                    <Table responsive>
                        <thead>
                            <tr><th>Date</th><th>Note</th><th>Patient</th><th>Actions</th></tr>
                        </thead>
                        <tbody>
                        {
                            unsaved.map(function(u){
                                return (
                                    <tr key={u.date+u.patId.toString()}>
                                        <td>{u.date}</td>
                                        <td>{u.fnote}</td>
                                        <td>{u.name}</td>
                                        <td><Button bsSize="small" onClick={this.showBtn(u.pos)}>Show</Button></td>
                                    </tr>
                                );
                            })
                        }
                        </tbody>
                    </Table>
                    }
                </fieldset>
            </Well>
        );
    }
} export default connect(mapStateToProps)(MeasUnsaved) ;

Вот ошибка:

ERROR: Uncaught Uncaught TypeError: Не удается прочитать свойство showBtn неопределенного значения onClick

+1
источник поделиться
3 ответа

У вас две проблемы;

  1. вы используете "это" внутри "карты" - см. "это" не определено внутри функции карты Reactjs

  2. вы выполняете this.showBtn в каждой строке, то, что вам нужно, это передать функцию в качестве аргумента - этого должно быть достаточно:

    onClick = {() => this.showBtn(u.pos)}

+1
источник

Прежде всего, вы получаете ошибку...

Uncaught TypeError: невозможно прочитать свойство showBtn неопределенного

... на линии, к которой вы обращаетесь this.showBtn. На этой строке this неопределенно, потому что внутри анонимной функции.

Если связать эту функцию с this он больше не будет неопределенным:

unsaved.map(function (u) {
    return (
        <tr key={u.date+u.patId.toString()}>
            <td>{u.date}</td>
            <td>{u.fnote}</td>
            <td>{u.name}</td>
            <td><Button bsSize="small" onClick={this.showBtn(u.pos)}>Show</Button></td>
        </tr>
    );
}.bind(this))

Кроме того, вы можете использовать функцию стрелки:

unsaved.map((u) =>
    <tr key={u.date+u.patId.toString()}>
        <td>{u.date}</td>
        <td>{u.fnote}</td>
        <td>{u.name}</td>
        <td><Button bsSize="small" onClick={this.showBtn(u.pos)}>Show</Button></td>
    </tr>
})

Во-вторых, чтобы заставить ваш код работать, вам нужно передать функцию в onClick{}, но вы делаете onClick={this.showBtn(e.pos)}. То, что это делает, сразу вызывает this.showBtn(e.pos) и передает возвращаемое значение (которое не определено) на onClick={}.

Вместо этого сделайте это...

onClick={this.showBtn.bind(this, u.pos)}

... или это (используя функцию стрелки)...

onClick={() => this.showBtn(u.pos)}
0
источник

(Отправлено от имени ОП).

Решено:

unsaved.map((u)=>{
                                return (
                                    <tr key={u.date+u.patId.toString()}>
                                        <td>{u.date}</td>
                                        <td>{u.fnote}</td>
                                        <td>{u.name}</td>
                                        <td><Button bsSize="small" onClick={(event) => this.showBtn(u.pos)}>Show</Button></td>
                                    </tr>
                                );
                            })
0
источник

Посмотрите другие вопросы по меткам или Задайте вопрос