javascript - 初次接触React，这里为什么会静默失败呢

问题描述

问 题

var WrapBox = React.createClass({
    getInitialState:function(){
        return{
            data:[]
        }
    },
    render:function(){
        return(
            <div>
                <InputandButtom data={this.state.data}/>
                <ListDisplay data={this.state.data} />
            </div>
        )
    }
})
var InputandButtom = React.createClass({
    addData:function(){
        var addText = this.refs.inputext.innerText
        console.log(addText)
        var addIndate = this.props.data
        addIndate.push({
            text:addText,
            key:Date.now()
        })
        this.setState({
            data:addIndate
        })
        
    },
    componentDidMount:function(){
        console.log(this.props.data)
    },
    render:function(){
        return(
            <form>
                <input type="text" ref="inputext" />
                <button onClick={this.addData}>save</button>
            </form>
        )
    }
})
var ListDisplay = React.createClass({
    render:function(){
        var addData = this.props.data
        function createList(data){
            return <li key={data.key}>{data.text}</li>
        }
        var dataListdone = addData.map(createList)
        return (
            <ul>
                {dataListdone}
            </ul>
        )
    }
})
ReactDOM.render(
    <WrapBox />,
    document.getElementById('example')
)

触发点击事件后，页面重绘，控制台也不报错，但是也输出不了console，这样怎么办啊，，找不到哪里出问题了呀

解决方案

事件this 指向对不对
onClick={this.addData.bind(this)}
试试

这篇关于javascript - 初次接触React，这里为什么会静默失败呢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！