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

Question

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，这样怎么办啊，，找不到哪里出问题了呀

Answer 1

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

Answer 2

你这个逻辑有错误的。状态应该回传给父组件去处理，才能刷新父组件的 render() 方法。

Answer 3

<form>
   <input type="text" ref="inputext" />
   <button onClick={this.addData}>save</button>
</form>

其实是有输出的，因为是 form ，点击 button 后会重新加载页面，所有在控制台是看不到的

不信你把 form 换成 div, 就可以看见了