React 三大属性state,props,refs以及组件嵌套的应用

男娘i 2023-02-23 03:36 112阅读 0赞

# React 三大属性state,props,refs以及组件嵌套的应用 #

**该项目实现了一个简单的表单输入添加列表的内容**  
![1][]  
![2][]

## 代码如下 ##

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
        <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
        <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
        <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    </head>
    
    <body>
    
        <div id="example"></div>
        <script type="text/babel">
            class App extends React.Component {
         
                constructor(props) {
         
                    super(props)
                    this.state = {
         
                        tudo : ["吃饭", '睡觉', '玩耍']
                    }
                    //将自定义函数中的this绑定到父类里
                    this.AddData = this.AddData.bind(this);
                }
    
                AddData (data) {
         
                    //取出状态
                    const {
         tudo} = this.state;
                    tudo.unshift(data);
                    //更新状态
                    this.setState({
         tudo});
                }
                render() {
         
                    return (
                        <div>
                            <h2>小潘的行为</h2>
                            <Add tudo = {
         this.state.tudo} AddData={
         this.AddData}/>
                            <List tudo = {
         this.state.tudo}/>
                        </div>
                    )
                }
            }
            class Add extends React.Component {
         
                constructor(props) {
         
                    super(props)
                    //将自定义函数中的this绑定到父类里
                    this.add = this.add.bind(this);
                }
                add () {
         
                    const value = this.input.value;
                    if (!value) return ;
                    this.props.AddData(value);
                    this.input.value = '';
                }
                render() {
         
                    const {
         tudo} = this.props;
                    return (
                        <div>
                            <input type="text" ref = {
         input => this.input = input}/>
                            <button onClick = {
         this.add}>Add #{
         tudo.length + 1}</button>
                        </div>
                    )
                }
            }
            Add.propTypes = {
         
                tudo : PropTypes.array.isRequired,
                AddData: PropTypes.func.isRequired
            }
            class List extends React.Component {
         
    
                render() {
         
                    const {
         tudo} = this.props;
                    return (
                        <ul>
                            {
         
                                tudo.map( (tudo, index) => <li key={
         index}>{
         tudo}</li> )
                            }
                        </ul>
                    )
                }
            }
            List.propTypes = {
         
                tudo : PropTypes.array.isRequired
            }
            ReactDOM.render( <App /> , document.getElementById('example'));
        </script>
    
    </body>
    
    </html>

[1]: https://img-blog.csdnimg.cn/20200704193934533.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3AxOTY3OTE0OTAx,size_16,color_FFFFFF,t_70
[2]: https://img-blog.csdnimg.cn/2020070419394523.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3AxOTY3OTE0OTAx,size_16,color_FFFFFF,t_70