React 自定义组件与组件复用

最新推荐文章于 2025-03-28 09:20:38 发布

minihoop

最新推荐文章于 2025-03-28 09:20:38 发布

阅读量2.1k

点赞数

分类专栏： JS JS react 文章标签： react组件复用

本文链接：https://blog.youkuaiyun.com/minihoop/article/details/51331891

版权

JS 同时被 2 个专栏收录

11 篇文章

订阅专栏

JS react

2 篇文章

订阅专栏

本文探讨了如何在React中实现组件的自定义和复用，强调了通过维护状态(state)来管理和处理数据，以提升组件的灵活性和重用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不可控组件和可控组件

不可控组件使用方式：

<span style="font-size:18px;"><input type="text" defaultValue="hello world"/>
      React.findDomNode(this.ref.input).value</span>

可控组件使用方式：

<input type="text" defaultValue={this.state.text}/>
      var inputText=this.state.text;

组件可控的好处：

符合React的数据流
数据存储在state中，便于使用
便于对数据进行处理

不可控组件实例

 var MyForm=React.createClass({
       handleSubmit:function(event){
           event.preventDefault();
           var helloTo=ReactDOM.findDOMNode(this.refs.helloTo).value;
           alert(helloTo);
       },
        render:function(){
            return <form onSubmit={this.handleSubmit}>
                <input  type="text" ref="helloTo" defaultValue="Hello World"/><br/>
                <button type="submit" >Speak</button>
            </form>
        }
    });

    ReactDOM.render(<MyForm/>,document.getElementById("app"));

可控组件实例：

var MyForm=React.createClass({
       getInitialState:function(){
           return {
               helloTo:"hello world"
           }
       },
        handleSubmit:function(event){
            event.preventDefault();
            alert(this.state.helloTo);
        },
        handleChange:function(event){
            this.setState({helloTo:event.target.value});
        },
        render:function(){
            return <form onSubmit={this.handleSubmit} >
                <input type="text" value={this.state.helloTo} onChange={this.handleChange}/>
                <button type="submit">submit</button>
            </form>
        }

    });
    ReactDOM.render(<MyForm/>,document.getElementById("app"));

复用事件处理函数

事件处理函数的两种复用方式：
1 bind复用

handleChange:function(name,event){}
      onChange={this.handleChange.bind(this,"input1")}

2 name复用

handleChange:function(event){
       var name=event.target.name;
      }
      onChange={this.handleChange}

bind组件复用实例

 var MyForm=React.createClass({
        getInitialState:function(){
            return{
                username:"",
                gender:"man",
                checked:true
            }
        },
        handleChange:function(name,event){
            var newState={};
            newState[name]=name=="checked"?event.target.checked:event.target.value;
            this.setState(newState);
        },
        handleSubmit:function(event){
            event.preventDefault();
            console.log(this.state);
        },
        render:function(){
            return <form onSubmit={this.handleSubmit}>
                <input type="text" onChange={this.handleChange.bind(this,"username")}/><br/>
                <select value={this.state.gender} onChange={this.handleChange.bind(this,"gender")}>
                    <option value="1">男</option>
                    <option value="2">女</option>
                </select><br/>
                <label htmlFor="checkbox">同意用户协议</label>
                <input id="checkbox" type="checkbox"  value="agree" checked={this.state.checked}
                       onChange={this.handleChange.bind(this,"checked")}
                /><br/>
                <button type="submit">submit</button>
            </form>
        }

    });
    ReactDOM.render(<MyForm/>,document.getElementById("app"));

name组件复用实例

     
      var MyForm=React.createClass({
        getInitialState:function(){
            return{
                username:"",
                gender:"man",
                checked:true
            }
        },
        handleChange:function(event){
            var name=event.target.name;
            var newState={};
            newState[name]=name=="checked"?event.target.checked:event.target.value;
            this.setState(newState,null);
        },
        handleSubmit:function(event){
            event.preventDefault();
            console.log(this.state);
        },
        render:function(){
            return <form onSubmit={this.handleSubmit}>
                <input type="text" onChange={this.handleChange} name="username"/><br/>
                <select value={this.state.gender} onChange={this.handleChange} name="gender">
                    <option value="1">男</option>
                    <option value="2">女</option>
                </select><br/>
                <label htmlFor="checkbox">同意用户协议</label>
                <input id="checkbox" type="checkbox"  value="agree" checked={this.state.checked}
                       onChange={this.handleChange} name="checked"
                /><br/>
                <button type="submit">submit</button>
            </form>
        }

    });
    ReactDOM.render(<MyForm/>,document.getElementById("app"));