Javascript React按钮绑定界面修改

我有一个添加计数器的按钮。它可以工作，但这是一个UI结构的问题。单击“添加计数器”时，会添加单个计数器

我需要的是拥有独立的计数器，可能是通过编程实现相同的结果，而不是单击按钮，直接使用+/-类

{counter}

我所拥有的：

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

当我点击+或-然后

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>

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

从“React”导入React；
从“../actions/counters”导入{add_counter}；
从'react redux'导入{connect}；
常量AddButton=（{dispatch}）=>(
{
调度（添加计数器（））；
}}>
添加计数器
);
导出默认连接（）（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);

从“React”导入React；
从'react redux'导入{connect}；
从“../actions/counters”导入{递增，递减}；
从“./Counter”导入计数器；
常量计数器列表=({
柜台，
增加,，
增稠剂
}) => (

{counters.map（计数器=>
onIncrement（counter.id）}
onDecrement={（）=>onDecrement（counter.id）}
/>
)}

);
常量mapStateToProps=（状态）=>{
返回{
计数器：状态
};
};
const mapDispatchToProps=（调度）=>{
返回{
onIncrement：（id）=>调度（增量（id）），
onDecrement：（id）=>调度（减量（id））
};
};
导出默认连接(
MapStateTops，
mapDispatchToProps
)（反对名单）；

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

import React，{Component}来自'React'；
从“../../logo.svg”导入徽标；
导入“../App.css”；
从'react redux'导入{connect}；
从“./Counter”导入计数器
从“/AddButton”导入AddButton；
类Posts扩展组件{
建造师（道具）{
超级（道具）；
此.state={
响应：“”
};
}
render（）{
返回(
{Array.isArray（this.state.response）&&
this.state.response.map（resIndex=>
{onIncrement（counter.id）}>
{resIndex.title}
{resIndex.body}
)}
)
}
}
导出默认连接（）（POST）；

在上述条件下，您可以使用Redux执行您想要的操作，但您无法访问

Posts

组件中的

计数器id

来递增/递减给定计数器。您需要以某种方式将该信息输入到

Posts

组件中，您希望在该组件中以编程方式调用递增/递减。该项目需要重组以解决这一问题。我会抛弃你正在学习的Redux，我会专注于掌握React中的状态和道具，而不是首先使用Redux

如果您有权访问计数器的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);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“./Counter”导入计数器；
从“../actions/counters”导入{递增，递减}；
从“/AddButton”导入AddButton；
类Posts扩展组件{
建造师（道具）{
超级（道具）；
此.state={
响应：“”
};
}
componentDidMount（）{
this.props.onIncrement（）；
}
render（）{
返回(
{Array.isArray（this.state.response）&&
this.state.response.map（resIndex=>
{resIndex.title}
{resIndex.body}
)}
)
}
}
const mapDispatchToProps=（调度）=>{
({
onIncrement：（id）=>调度（增量（id）），
onDecrement：（id）=>调度（减量（id））
});
};
导出默认连接（{}，mapDispatchToProps）（Posts）；

我不确定是否遵循……因此，您想要一个“+”和“-”按钮，而不是一个“添加”按钮，它将递增/递减计数器？是的。它们仅在我单击“添加”按钮时显示，但我希望它们像我已单击一样直接显示不确定您所说的“我希望它们像已单击一样直接显示”是什么意思。如果您想通过编程方式调用它们，为什么不在某个地方调用

onIncrement（counter.id）

呢？@technogeek1995 I get./src/js/components/Posts.js第35:38行：“onIncrement”未定义未定义未定义第35:50行：“counter”未定义未定义未定义未定义我建议阅读关于提升状态的内容。您需要做的是将状态从计数器向上移动到Post组件中，这样您就可以在那里调用函数。第40:3行：应该是赋值或函数调用，而不是看到一个表达式没有未使用的表达式（on（{onIncrement:（id）=>等）…谢谢你的回答。当我让它工作时，我会接受它。我正在学习，所以这意味着它需要重组，或者我不会学习。你想知道如何在没有redux的情况下完成它吗？它非常简单。它需要有redux。我已经能够在没有redux的情况下完成它。我只需要一些重组。唯一的问题是+/-计数器只显示在屏幕上g根类名称中的第一个

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

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