设计带有多个文件附件选项的文本框

Question

我想设计一个文本框，该文本框需要添加多个文件的选项。我们可以参考skype文本框来发送消息并添加文件。

我创建了一些文本框，但是无法设计出具有更好用户体验的文本框。

其中一个示例如下。

}
// Don't know what is in here, empty object for starters 
const state : State = {
} as State


const useStore = () => {
    const useValue = <K extends keyof State>(name: K) => {
        const value = state[name]
        const setValue = (value: State[K]): void => {
            state[name] = value
        }
        return [value, setValue] as const
    }

    return { state, useValue }
}
type UseStore = ReturnType<typeof useStore>;

const { useValue } = useStore()

interface State { isPending: boolean }
state.isPending = false; // no guarantee people actually intialize, maybe initial value can be passed to useValue ? 
const [isPending, setIsPending] = useValue('isPending')

interface State { results: string[] }
state.results = ['a', 'b', 'c'];
const [results, setResults] = useValue('results')


interface State { results: number[] } // some else wants to use results for something else, err 
const [results2, setResults2] = useValue('results')

但是我想创建一个像skype这样的文本框以供参考，下面我添加了一张图片。

任何人都可以帮助我设计一个文本框，该文本框应具有“附加多个文件”选项，并在该文本框内发送图标。

谢谢。

Answer 1

您需要将textarea包裹在div中，并使用icon在div中添加position:absolute;

.cmnt-control{
  position:relative;
}
.cmnt-control textarea{
  padding:10px 55px 10px 20px;
  width:calc(100% - 75px);
  resize: none;
}
.iconuser{
  position:absolute;
  top:10px;
  left:5px;
  cursor:pointer;
}
.icon{
  position:absolute;
  top:10px;
  right:0px;
  cursor:pointer;
}
.icon.icon2{
  right:30px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<div class="cmnt-control">
  <i class="fa fa-user iconuser"></i>
  <textarea #cName cols="50" rows="1"></textarea>
  <i class="fa fa-search icon"></i>
  <i class="fa fa-plus icon icon2"></i>
</div>