Question

我正在尝试制作一个计数器，但由于某些原因我的代码不起作用，我真的不知道还能做什么。如果单击值为1的按钮，H1应自动更改。

当我检查页面时，我会看到您在屏幕截图中看到的错误

我的代码中是否有任何错误，或许我看不到？

<div id="app"></div>

<script type="text/babel">

var CounterChallenge = React.createClass({

    getInitialState: function(){
        return{
            count: 0
        }
    },

    incrementCount: function(value){
        this.setState({
            count: this.state.count + value
        })
    },

    getDefaultProps: function(){
        return{
            valueOne: 1,
            valueTwo: 5,
            valueThree: 10
        }
    },

    render: function() {
        return(
            <div>
                 <h1>Count: {this.state.count}</h1>
                <Button value={this.props.valueOne} clickHandler={this.incrementCount.bind(this, this.props.valueOne)}>Add {props.valueOne}</Button>
                <Button value={this.props.valueTwo} clickHandler={this.incrementCount.bind(this, this.props.valueTwo)}>Add {props.valueTwo}</Button>
                <Button value={this.props.valueThree} clickHandler={this.incrementCount.bind(this, this.props.valueThree)}>Add {props.valueThree}</Button>
            </div>
        )
    }
});

var Button = function(props){
    return(
        <button value={props.value} onClick={this.clickHandler}> Add {props.value}</button>
    )   

};

ReactDOM.render(
    <CounterChallenge />,
    document.getElementById('app')
);

Answer 1

根据您发布的错误，问题似乎与每个Button组件的内容有关：

Add {props.valueOne}

props这里未定义。我认为你的意思是this.props.valueOne。

此外，您将内容输入按钮两次。来到这里：

<Button value={this.props.valueOne}>Add {props.valueOne}</Button>

然后又在实际组件中：

var Button = function(props){
    return(
        <button value={props.value} onClick={this.clickHandler}> Add {props.value}</button>
    )   
};

编辑：您还需要将按钮的onClick更改为{this.props.clickHandler}而不是{this.clickHandler}，因为后者未定义：

return(
    <button value={props.value} onClick={this.props.clickHandler}> Add {props.value}</button>
)

Answer 2

如果您尝试实现类似的目标，请检查此网址https://jsfiddle.net/navceasw/

var CounterChallenge = React.createClass({

getInitialState: function(){
    return{
        count: 0
    }
},

incrementCount: function(value){
    this.setState({
        count: this.state.count + value
    })
},

getDefaultProps: function(){
    return{
        valueOne: 1,
        valueTwo: 5,
        valueThree: 10
    }
},

render: function() {
    const { valueOne, valueTwo, valueThree } = this.props;
    const { count } = this.state;
    return(
        <div>
            <Button value={valueOne} clickHandler={this.incrementCount.bind(this, valueOne)}>Add {valueOne}</Button>
            <Button value={valueTwo} clickHandler={this.incrementCount.bind(this, valueTwo)}>Add {valueTwo}</Button>
            <Button value={valueThree} clickHandler={this.incrementCount.bind(this, valueThree)}>Add {valueThree}</Button>
            <div>
                Counter Value : { count }
            </div>
        </div>
    )
  }
});

var Button = ({ value, clickHandler, children }) => {
   return(
    <button value={value} onClick={clickHandler}> { children } </button>
  )   

};

ReactDOM.render(
  <CounterChallenge />,
  document.getElementById('app')
);

React组件无法正常工作

2 个答案: