Question

我有一个添加计数器的按钮。它可以工作，但是与UI结构有关。当我单击添加计数器时，将添加单个计数器。

我需要的是拥有独立的计数器，也许是通过编程方式获得相同的结果，而不是onClick按钮，而使+/-像<button> {counter} </button>一样直接实现。

我所拥有的：

我需要什么（无需单击上面的按钮）：

当我单击+或-然后

TypeError: this.props.onIncrement is not a function
onClick

src/js/components/Posts.js:33
  30 | <div>
  31 |     <span>{this.props.value}</span>
  32 |     <button
> 33 |     onClick={() => this.props.onIncrement()}>
     | ^  34 |     +
  35 |     </button>

代码：

Counter.js

// ./src/js/components/Counter.js

import React, { Component } from 'react';
class Counter extends Component {
    render() {
        return (
        <div>
            <span>{this.props.value}</span>
            <button
            onClick={() => this.props.onIncrement()}>
            +
            </button>
            <button
            onClick={() => this.props.onDecrement()}>
            -
            </button>
        </div>
        );
    }
}
export default Counter;

动作

// ./src/js/actions/counters.js

export const increment = (id) => {
    return {
    type: "INCREMENT",
    id
    };
};
export const decrement = (id) => {
    return {
        type: "DECREMENT",
        id
    };
};
export const add_counter = () => {
    return {
        type: "ADD_COUNTER"
    };
};

AddButton.js：

import React from 'react';
import { add_counter } from '../actions/counters';
import { connect } from 'react-redux';
const AddButton = ({dispatch}) => (
  <button
  onClick={() => {
    dispatch(add_counter());
  }}>
    Add a counter
  </button>
);
export default connect()(AddButton);

counterlist.js

// ./src/js/components/CounterList.js

import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from '../actions/counters';
import Counter from './Counter';
const CounterList = ({
  counters,
  onIncrement,
  onDecrement
}) => (
  <ul>
    {counters.map(counter => 
      <Counter
        key={counter.id}
        value={counter.count}
        onIncrement={() => onIncrement(counter.id)}
        onDecrement={() => onDecrement(counter.id)}
      />
    )}
  </ul>
);
const mapStateToProps = (state) => {
  return {
    counters: state
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    onIncrement: (id) => dispatch(increment(id)),
    onDecrement: (id) => dispatch(decrement(id))
  };
};
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(CounterList);

Posts.js

import React, {Component} from 'react';
import logo from '../../logo.svg';
import '../../App.css';
import { connect } from 'react-redux';
import Counter from './Counter'
import AddButton from './AddButton';

class Posts extends Component {
    constructor(props) {
        super(props);

        this.state = {
            response: ''
        };
    }

    render() {

        return (
        <div className="App">
            {Array.isArray(this.state.response) &&
                this.state.response.map(resIndex => <div>
                    <AddButton/>
                    <Counter/>
                    {onIncrement(counter.id)}>
                    <h5> { resIndex.title } </h5>
                    <h5> { resIndex.body } </h5>
            </div>
            )}
        </div>
        )
    }
}


export default connect()(Posts);

Answer 1

鉴于上面已经具备的功能，您可以使用Redux来做您想做的事，但是您无法访问counter_id组件中的Posts来增加/减少给定的计数器。您需要以某种方式将这些信息添加到Posts组件中，在该组件中您要以编程方式调用增量/减量。该项目将需要进行重组以解决该问题。我会抛弃Redux，因为它似乎是您正在学习的东西，而我会专注于首先在没有Redux的情况下掌握React中的状态和道具。

如果可以访问计数器的ID，这就是使用Redux的方法。您将使用mapDispatchToProps函数将增量/减量函数作为道具传递给组件。 Posts组件中没有此功能，这就是为什么它告诉您函数未定义的原因。您必须具有mapDispatchToProps才能在this.props上定义函数。

我不确定要调用this.props.onIncrement时需要做什么，因此我只是将其放在componentDidMount中用于演示。

import React, {Component} from 'react';
import { connect } from 'react-redux';
import Counter from './Counter';
import { increment, decrement } from '../actions/counters';
import AddButton from './AddButton';

class Posts extends Component {
    constructor(props) {
        super(props);

        this.state = {
            response: ''
        };
    }

   componentDidMount() {
       this.props.onIncrement(<your_counter_id>);
   }

    render() {

        return (
        <div className="App">
            {Array.isArray(this.state.response) &&
                this.state.response.map(resIndex => <div>
                    <AddButton/>
                    <Counter/>
                    <h5> { resIndex.title } </h5>
                    <h5> { resIndex.body } </h5>
            </div>
            )}
        </div>
        )
    }
}


const mapDispatchToProps = (dispatch) => {
  ({
    onIncrement: (id) => dispatch(increment(id)),
    onDecrement: (id) => dispatch(decrement(id))
  });
};

export default connect({}, mapDispatchToProps)(Posts);

React按钮绑定界面修改

1 个答案: