获取id值并将其设置为react状态

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

您应该在getDerivedStateFromProps组件中添加DropDown生命周期事件并从那里删除chosenValue值状态，您可以直接在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}/>