Question

我有在父组件中使用的可重用Dropdown组件

class Dropdown extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isShowing: false,
            listData: this.props.data,
            chosenValue: this.props.date ? this.props.date : "Izaberi"
        }
    }

    componentDidMount() {
        document.addEventListener('mousedown', this.handleClickOutside);
    }

    componentWillUnmount() {
        document.removeEventListener('mousedown', this.handleClickOutside);
    }

    handleClickOutside = () => {
        this.setState({ isShowing: false })
    }

    handleClick = () => {
        this.setState({ isShowing: true })
    }

    handleChange = (e, data) => {
       e.stopPropagation();
       this.setState({ chosenValue: data })
       this.props.handleChange(e, data);
    }

    render() {
        return (
            <div className="input-with-arrrow">
                <input type="text" className="form-input toggle-popup" value={this.state.chosenValue} onChange={this.handleChange} onClick={this.handleClick} />
                <div className="popup" style={{ display: this.state.isShowing ? "block" : "none" }}>
                    <ul>
                        {
                            this.props.data.map((item, key) => {
                                return <li className="popup-items" key={key} id={item.id} onMouseDown={(e) => this.handleChange(e, item.name)}>{item.name}</li>
                            })
                        }
                    </ul>
                </div>
            </div>
        )
    }
}

export default Dropdown;

我的父组件看起来像这样

class SingleCallView extends React.Component {
    constructor(props) {
        super(props);
        this.handleChangeInput = this.handleChangeInput.bind(this);

    }

    state = {
        contact_type: '',
        call_type: ''
    };


    componentWillMount() {
        this.props.fetchForm();
    }


    handleChangeInput = (event, data) => {
        const target = event.target;
        const name = target.name;
        const value = target.value;
        this.setState({ [name]: value });
    };

    render() {

        const [call_types, contact_types] = this.props.formData;
        return (
                                <Dropdown id="contact_type" data={contact_types} handleChange= {this.handleChangeInput} />

                                <Dropdown id="call_type" data={call_types} handleChange={this.handleChangeInput} /> <br />

        )
    }
}

const mapStateToProps = state => ({
    formData: state.formData.formData,
    calls: state.calls.calls
});

export default connect(
    mapStateToProps,
    { fetchForm, addCall }
) 
(SingleCallView);

我要传递给下拉组件的数组的对象具有属性（“ id”，“ name”），我可以打开下拉列表，查看名称列表，选择它，然后更改selectedValue。我需要在父组件中更改状态，以便this.state.contact_type获得（“ id”）值

Answer 1

您应该在UIColor *color = [UIColor alloc]; NSLog(@"Address after alloc: %p - class: %@", color, [color class]); color = [color initWithRed:1.0, green:1.0, blue:1.0, alpha:1.0]; NSLog(@"Address after init: %p - class: %@", color, [color class]);组件中添加document.getElementById("submit_ok").addEventListener("click", sendAjax); function resolveAfter05Second() { console.log("starting fast promise") return new Promise(resolve => { setTimeout(function() { resolve("fast") console.log("fast promise is done") }, 500) }) } async function sendAjax() { let ax1 = await Ajax1 ("POST", "http://router/login") let fast = await resolveAfter05Second() let ax2 = await Ajax2 ("POST", "http://webserver/anti-xss.php") } function Ajax1 (method, url){ return new Promise (function (resolve, reject){ let xhr = new XMLHttpRequest(); xhr.open('POST', 'http://router/login', true); xhr.onload = function(){ if(this.status >= 200 && this.status < 300){ resolve(xhr.response); console.log("Success!"); console.log("You'r logged in."); console.log("XHR1 " + xhr.readyState); console.log("XHR1 " + xhr.status); }else{ reject({ status: this.status, statusText: xhr.statusText }); } }; xhr.onerror = function (){ reject({ status: this.status, statusText: xhr.statusText }); }; xhr.send("username=HSuser&password=SimpleUserPassword"); }); } function Ajax2 (method, url){ return new Promise (function (resolve, reject){ let xhr2 = new XMLHttpRequest(); xhr2.open('POST', 'http://webserver/anti-xss.php', true); xhr2.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr2.onload = function(){ if(this.status >= 200 && this.status < 300){ resolve(xhr2.response); console.log("Success!"); console.log("You'r email is " + useremail + "."); console.log("XHR2 " + xhr2.readyState); console.log("XHR2 " + xhr2.status); }else{ reject({ status: this.status, statusText: xhr2.statusText }); } }; xhr2.onerror = function (){ reject({ status: this.status, statusText: this.statusText }); }; let useremail = document.getElementById("email").value; xhr2.send("Email="+encodeURIComponent(useremail)); }); }生命周期事件，并从那里删除getDerivedStateFromProps值状态，可以直接在DropDown组件内部使用props值。

Answer 2

我通过在子组件和父组件中添加handleDropdown方法来解决此问题

//child
handleDropdown = (event) => {
        const {value} = event.target;
        this.props.onChange(value);
    };

//add to input element
onChange={this.handleDropdown}
//add to li element
id={this.props.id}

//add to parent component
handleDropdown = (event, data) => {
        const target = event.target;
        const name = target.id;
        const value = target.value;
        this.setState({ [name]: value });
    };
//<Dropdown> should look like this
<Dropdown data={contact_types} id={'contact_type'} handleChange={this.handleDropdown} onChange={this.handleDropdown}/>

获取ID值并将其设置为反应状态

2 个答案: