完整实现react的非受控组件需要监控用户对defaultValue/defaultChecked的操作 about anu HOT 3 CLOSED

           var container = document.getElementById("example")
           var div = container
            var PropTypes = React.PropTypes
            if(!window.ReactDOM){
              window.ReactDOM = React
            }
            var expect = function(a) {
                return {
                    toBe: function(b) {
                        console.log(a,"vs", b, a === b)
                    },
                    toEqual(b){
                        console.log(a,"vs", b, a +""=== b+"")
                    },
                    toThrow(b){
                        try{
                            a()
                        }catch(e){
                            console.log(e,"vs", b, e.message +""=== b+"")
                        }
                    }
                }
            }

            function dispatchEventOnNode(node, type) {
                node.dispatchEvent(new Event(type, {bubbles: true, cancelable: true}));
            }
            function emptyFunction(){
                console.log("empty")
            }
            var setUntrackedValue = Object.getOwnPropertyDescriptor(
                HTMLInputElement.prototype,
                'value',
            ).set;
          
           var stub = (
                <select multiple={true} defaultValue={["giraffe", "gorilla"]}>
                    <option value="monkey">A monkey!</option>
                    <option value="giraffe">A giraffe!</option>
                    <option value="gorilla">A gorilla!</option>
                </select>
            );
            var options = stub.props.children;
            stub = ReactDOM.render(stub, container);
            var node = ReactDOM.findDOMNode(stub);
    
            expect(node.options[0].selected).toBe(false); // monkey
            expect(node.options[1].selected).toBe(true); // giraffe
            expect(node.options[2].selected).toBe(true); // gorilla

             // Changing `defaultValue` should do nothing.
        ReactDOM.render(
            <select multiple={true} defaultValue={["monkey"]}>
                {options}
            </select>,
            container
        );

        expect(node.options[0].selected).toBe(false); // monkey
        expect(node.options[1].selected).toBe(true); // giraffe
        expect(node.options[2].selected).toBe(true); // gorilla
       console.log("第二个测试")
       var container = document.createElement("div")
        document.body.appendChild(container)
        var stub = (
            <select defaultValue={"yyy"}>
                <option value="xxx">xxx</option>
                <option value="yyy">yyy</option>
                <option value="zzz">zzz</option>
            </select>
        );
        var options = stub.props.children;
        stub = ReactDOM.render(stub, container);
        var node = ReactDOM.findDOMNode(stub);

        expect(node.options[0].selected).toBe(false); // monkey
        expect(node.options[1].selected).toBe(true); // giraffe
        expect(node.options[2].selected).toBe(false); // gorilla

        // Changing `defaultValue` should do nothing.
        ReactDOM.render(
        <select defaultValue={"zzz"}>
            {options}
        </select>,
        container
        );

        expect(node.options[0].selected).toBe(false); // monkey
        expect(node.options[1].selected).toBe(true); // giraffe
        expect(node.options[2].selected).toBe(false); // gorilla
        console.log("第三个测试")

        var container = document.createElement("div")
        document.body.appendChild(container)
        var stub = (
            <select defaultValue="giraffe">
                <option value="monkey">A monkey!</option>
                <option value="giraffe">A giraffe!</option>
                <option value="gorilla">A gorilla!</option>
            </select>
        );
        var options = stub.props.children;
        stub = ReactDOM.render(stub, container);
        var node = ReactDOM.findDOMNode(stub);

        expect(node.value).toBe("giraffe");

        // Changing `defaultValue` should do nothing.
        ReactDOM.render(<select defaultValue="gorilla">{options}</select>, container);
        expect(node.value).toEqual("giraffe");

        console.log("第四个测试")

        var container = document.createElement("div")
        document.body.appendChild(container)
        var el = (
            <select defaultValue="giraffe">
                <option value="monkey">A monkey!</option>
                <option value="giraffe">A giraffe!</option>
                <option value="gorilla">A gorilla!</option>
            </select>
        );
        var stub = ReactDOM.render(el, container);
        var node = ReactDOM.findDOMNode(stub);

        expect(node.value).toBe("giraffe");

        node.value = "monkey";
        ReactDOM.render(el, container);
        // Uncontrolled selects shouldn't change the value after first mounting
        expect(node.value).toEqual("monkey");

var breakNode = {
    form: 1,
    body: 1
};
function syncOtherRadios(dom, v) {
    var queryRoot = dom;
    while (queryRoot.parentNode) {
        if (breakNode[queryRoot.nodeName.toLowerCase()]) {
            break;
        }
        queryRoot = queryRoot.parentNode;
    }
    var inputs = queryRoot ? queryRoot.getElementsByTagName("input") : [];
    for (var i = 0, el; (el = inputs[i++]); ) {
        if (el !== dom && el.type === dom.type && el.name === dom.name && el.form === dom.form) {
            if (el.checked !== !v) {
                el.checked = !v;
            }
        }
    }
}

function keepPersistValue(e) {
    var dom = e.target;
    var name = e.type === "textarea" ? "innerHTML" : /check|radio/.test(dom.type) ? "checked" : "value";
    var v = dom._persistValue;
    if (dom.type === "radio") {
        syncOtherRadios(dom, v);
    }
    var noNull = v != null;
    var noEqual = dom[name] !== v; //2.0 , 2
    if (noNull && noEqual) {
        dom[name] = v;
    }
}