SOURCE

const { useState, useEffect } = React;
function SearchInput(props) {
    const selectList = props.selectList || [];
    const [selectValue, setSelectValue] = useState('');
    const [searchValue, setSearchValue] = useState('');
    useEffect(() => {
        props.change({ selectValue, searchValue })
    }, [selectValue, searchValue])
    return <div>
        <select value={selectValue} onChange={(e) => {
            setSelectValue(e.target.value);
        }}>
            {selectList.map((item, i) => {
                return <option value={item.value} key={i}>{item.label}</option>
            })}
        </select>
        <input value={searchValue} onChange={(e) => {
            setSearchValue(e.target.value);
        }} />
    </div>
}

class App extends React.Component {
    render() {
        return <div>
            <SearchInput selectList={[
                { label: '全部', value: '' },
                { label: '图片', value: 'image' },
                { label: '视频', value: 'video' },
                { label: '音乐', value: 'audio' },
                { label: '文档', value: 'file' },
            ]} change={(e) => {
                console.log(e)
            }}
            ></SearchInput>
        </div>
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

<div id="app"></div>