搜索框。

ShadowEditor.UI/src/editor/assets/ScenePanel.jsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames/bind';
 import PropTypes from 'prop-types';
 
+import SearchField from '../../form/SearchField.jsx';
 import ImageList from '../../image/ImageList.jsx';
 
 /**
@@ -9,7 +10,10 @@ import ImageList from '../../image/ImageList.jsx';
  */
 class ScenePanel extends React.Component {
     render() {
-        return <ImageList></ImageList>;
+        return <div className={'ScenePanel'}>
+            <SearchField></SearchField>
+            <ImageList></ImageList>
+        </div>;
     }
 }
 

ShadowEditor.UI/src/form/SearchField.jsx

@@ -0,0 +1,64 @@
+import './css/Input.css';
+import classNames from 'classnames/bind';
+import PropTypes from 'prop-types';
+
+/**
+ * 搜索框
+ * @author tengge / https://github.com/tengge1
+ */
+class SearchField extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            value: props.value,
+        };
+
+        this.handleChange = this.handleChange.bind(this, props.onChange);
+        this.handleInput = this.handleInput.bind(this, props.onInput);
+    }
+
+    handleChange(onChange, event) {
+        this.setState({
+            value: event.target.value,
+        });
+        onChange && onChange(event.target.value, event);
+    }
+
+    handleInput(onInput, event) {
+        this.setState({
+            value: event.target.value,
+        });
+        onInput && onInput(event.target.value, event);
+    }
+
+    render() {
+        const { className, style, value, onChange, onInput, ...others } = this.props;
+
+        return <input
+            className={classNames('Input', className)}
+            style={style}
+            value={this.state.value}
+            onChange={this.handleChange}
+            onInput={this.handleInput}
+            {...others} />;
+    }
+}
+
+SearchField.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+    onInput: PropTypes.func,
+};
+
+SearchField.defaultProps = {
+    className: null,
+    style: null,
+    value: '',
+    onChange: null,
+    onInput: null,
+};
+
+export default SearchField;