2017-07-12 61 views

回答

-1

創建自定義Web聊天。

的來源是這裏:https://github.com/Microsoft/BotFramework-WebChat

你可以看看到Shell.tsxfile,其中按鈕(稱爲wc-upload-input)位於:

<div className={className}> 
    <input id="wc-upload-input" type="file" ref={ input => this.fileInput = input } multiple onChange={() => this.onChangeFile() } /> 
    <label className="wc-upload" htmlFor="wc-upload-input"> 
     <svg> 
      <path d="M19.96 4.79m-2 0a2 2 0 0 1 4 0 2 2 0 0 1-4 0zM8.32 4.19L2.5 15.53 22.45 15.53 17.46 8.56 14.42 11.18 8.32 4.19ZM1.04 1L1.04 17 24.96 17 24.96 1 1.04 1ZM1.03 0L24.96 0C25.54 0 26 0.45 26 0.99L26 17.01C26 17.55 25.53 18 24.96 18L1.03 18C0.46 18 0 17.55 0 17.01L0 0.99C0 0.45 0.47 0 1.03 0Z" /> 
     </svg> 
    </label> 
    <div className="wc-textbox"> 
     <input 
      type="text" 
      className="wc-shellinput" 
      ref={ input => this.textInput = input } 
      autoFocus 
      value={ this.props.inputText } 
      onChange={ _ => this.props.onChangeText(this.textInput.value) } 
      onKeyPress={ e => this.onKeyPress(e) } 
      onFocus = {() => this.onTextInputFocus()} 
      placeholder={ this.props.listening ? this.props.strings.listeningIndicator : this.props.strings.consolePlaceholder } 
     /> 
    </div> 
    <label className={sendButtonClassName} onClick={() => this.onClickSend() } > 
     <svg> 
      <path d="M26.79 9.38A0.31 0.31 0 0 0 26.79 8.79L0.41 0.02C0.36 0 0.34 0 0.32 0 0.14 0 0 0.13 0 0.29 0 0.33 0.01 0.37 0.03 0.41L3.44 9.08 0.03 17.76A0.29 0.29 0 0 0 0.01 17.8 0.28 0.28 0 0 0 0.01 17.86C0.01 18.02 0.14 18.16 0.3 18.16A0.3 0.3 0 0 0 0.41 18.14L26.79 9.38ZM0.81 0.79L24.84 8.79 3.98 8.79 0.81 0.79ZM3.98 9.37L24.84 9.37 0.81 17.37 3.98 9.37Z" /> 
     </svg> 
    </label> 

    <label className={micButtonClassName} onClick={() => this.onClickMic() } > 
     <svg width="28" height="22" viewBox="0 0 58 58" > 
      <path d="M 44 28 C 43.448 28 43 28.447 43 29 L 43 35 C 43 42.72 36.72 49 29 49 C 21.28 49 15 42.72 15 35 L 15 29 C 15 28.447 14.552 28 14 28 C 13.448 28 13 28.447 13 29 L 13 35 C 13 43.485 19.644 50.429 28 50.949 L 28 56 L 23 56 C 22.448 56 22 56.447 22 57 C 22 57.553 22.448 58 23 58 L 35 58 C 35.552 58 36 57.553 36 57 C 36 56.447 35.552 56 35 56 L 30 56 L 30 50.949 C 38.356 50.429 45 43.484 45 35 L 45 29 C 45 28.447 44.552 28 44 28 Z"/> 
      <path id="micFilling" d="M 28.97 44.438 L 28.97 44.438 C 23.773 44.438 19.521 40.033 19.521 34.649 L 19.521 11.156 C 19.521 5.772 23.773 1.368 28.97 1.368 L 28.97 1.368 C 34.166 1.368 38.418 5.772 38.418 11.156 L 38.418 34.649 C 38.418 40.033 34.166 44.438 28.97 44.438 Z"/> 
      <path d="M 29 46 C 35.065 46 40 41.065 40 35 L 40 11 C 40 4.935 35.065 0 29 0 C 22.935 0 18 4.935 18 11 L 18 35 C 18 41.065 22.935 46 29 46 Z M 20 11 C 20 6.037 24.038 2 29 2 C 33.962 2 38 6.037 38 11 L 38 35 C 38 39.963 33.962 44 29 44 C 24.038 44 20 39.963 20 35 L 20 11 Z"/> 
     </svg> 
    </label> 
</div> 
+1

雖然這種聯繫可以回答這個問題,這是更好在這裏包括答案的基本部分,並提供參考鏈接。如果鏈接頁面更改,則僅鏈接答案可能會失效。 - [來自評論](/ review/low-quality-posts/16691719) –

+0

@ʙᴜᴅɪ我的回答與問題的級別一致。但是好的我會編輯 –

+0

編輯的答案,希望現在好一點 –