Question

我试图像这样在按钮单击上调用方法（按钮在方法本身内返回）：

<button onClick={removeClick}>Remove</button>

这是我尝试调用的方法

removeClick = event => {
    console.log('clicked');
};

我总是会收到类似“ _this2未定义”之类的错误消息

我已经尝试将方法绑定到构造函数中。 onClick中的箭头功能无法正常工作

removeClick = event => {
    console.log('clicked');
};

renderWeather(cityData) {
    const name = cityData.city.name;
    const temps = cityData.list.map(weather => weather.main.temp - 273.15);
    const pressures = cityData.list.map(weather => weather.main.pressure);
    const humidities = cityData.list.map(weather => weather.main.humidity);
    const { lon, lat } = cityData.city.coord;

    return (
        <tr key={lon + lat}>
            <td>
                <GoogleMap lon={lon} lat={lat} />
                <span className="city-name">{name}</span>
            </td>
            <td>
                <WeatherChart data={temps} color="red" unit="°C" />
            </td>
            <td>
                <WeatherChart data={pressures} color="orange" unit="hPA" />
            </td>
            <td>
                <WeatherChart data={humidities} color="blue" unit="%" />
            </td>
            <td>
                <button onClick={this.removeClick}>Remove</button>
            </td>
        </tr>
    );
}

render() {
    return (
        <table className="table table-hover">
            <thead>
                <tr>
                    <th>City</th>
                    <th>Temperature (°C) </th>
                    <th>Pressure (hPA)</th>
                    <th>Humidity (%)</th>
                    <th />
                </tr>
            </thead>
            <tbody>{this.props.weather.map(this.renderWeather)}</tbody>
        </table>
    );
}
}

const mapStateToProps = ({ weather }) => ({
    weather
});

const mapDispatchToProps = {
removeCity
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(WeatherList);

这是我的组件的样子

我希望任何人都能帮助我

Answer 1

尝试将this作为第二个参数传递给map

<tbody>{this.props.weather.map(this.renderWeather, this)}</tbody>

class Item extends React.Component {

removeClick = event => {
    console.log('clicked');
}

renderWeather(cityData) {
    return <button onClick={this.removeClick}>Remove</button>     
}

render() {
    return (
        <table className="table table-hover">
            <thead>
                <tr>
                    <th>City</th>
                    <th>Temperature (°C) </th>
                    <th>Pressure (hPA)</th>
                    <th>Humidity (%)</th>
                    <th />
                </tr>
            </thead>
            <tbody>{this.props.weather.map(this.renderWeather, this)}</tbody>
        </table>
    )
}
}

const weather = [
  {
    city: {name: '123'}
  }
];

ReactDOM.render(
    <Item weather={weather} />,
    document.getElementById('root')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root'></div>

Answer 2

尝试

renderWeather = cityData => {
...
}

并且由于您正在使用clickhandler处理一组数据，因此您可能希望向其传递某种标识符

removeClick = id => event => {
    console.log(`Removing data for ${id}`)
}

并通过

调用

<button onClick={() => {this.removeClick(id)}}>Remove</button>

在方法

2 个答案: