由於執行錯誤，react createref 返回錯誤

Question

這是提交答案后編輯的問題

在這段代碼中，我的文件瀏覽器現在將直接打開，但是當我提交最終按鈕時，我沒有得到更新的狀態。

uploadImage() 會將圖像轉換為 base 64，然后更新狀態的值。

uploadCode() 將用於在單擊提交按鈕后最終發送數據。 我已經檢查過我沒有根據這個邏輯（即標簽和 htmlFor）在這個函數中獲得更新的狀態值。

當點擊上傳圖片 div 然后將狀態變量 show image 從 false 設置為 true 時，我之前的邏輯很好； 選擇文件按鈕僅在狀態為真時可見。 其余所有實現都是相同的，並且工作正常。 但是現在我能夠獲得更新的狀態，這就是為什么當單擊提交按鈕時我沒有獲得圖像，因為狀態沒有更新。

 constructor(props, context) {
    super(props, context);
    this.inputFile = React.createRef()
    this.onButtonClick = this.onButtonClick.bind(this);
}
uploadImage = (e) => {
    console.log('function called')
/*************New Edit*************/
// getting the image through base64 string and then update it on state;
this.setState({image: myBase64String}, () => { console.log(this.state.image )});
// Return the string through above console
  }

uploadCode = () => {
const {image} = this.state;
console.log(image);//returns undefined;
}
render(){
 return (
    <div><Button onClick={()=>this.uploadCode()} >SUBMIT</Button></div>
      <div className={cx(styles['display-tablecell'], styles['pl-lg'])}>
        <FormControl
          style={{display: 'none'}}
          id="formControlsFile"
          type="file"
          label="File"
          onChange={this.uploadImage}
          name="image"
          ref={this.inputFile}
        />
        <label
          style={{display: 'inline-block'}}
          // onClick={this.onButtonClick}
          htmlFor="formControlsFile" <---- binding to the input tag using the same id
        >
          <i className={cx(fontStyles.fa, fontStyles['fa-image'])} />
        </label>
      </div>
)
}

Answer 1

當用戶單擊<span />時，您正在嘗試打開文件資源管理器。 但是，您不需要模擬click行為來實現這一點。 您可以使用 html <label />標簽來綁定<input type="file" />的onclick功能。 就是這樣 -

class App extends Component {
  constructor(props, context) {
    super(props, context)
    /* You won't need these
    this.inputFile = React.createRef()
    this.onButtonClick = this.onButtonClick.bind(this)
    */
  }

  uploadImage = (e) => {
    console.log('function called')
/*************New Edit*************/
// getting the image through base64 string and then update it on state;
this.setState({image: myBase64String}, () => { console.log(this.state.image )});
// Return the string through above console
  }

  /* You won't need these
  onButtonClick = () => {
    console.log('div clicked')
    this.inputFile.current.click()
  }
  */
uploadCode = () => {
const {image} = this.state;
console.log(image);//returns undefined;
}
  render() {
    return (
<div><Button onClick={()=>this.uploadCode()} >SUBMIT</Button></div>
      <div className={cx(styles['display-tablecell'], styles['pl-lg'])}>
        <FormControl
          style={{display: 'none'}}
          id="formControlsFile"
          type="file"
          label="File"
          onChange={this.uploadImage}
          name="image"
          ref={this.inputFile}
        />
        <label
          style={{display: 'inline-block'}}
          // onClick={this.onButtonClick}
          htmlFor="formControlsFile" <---- binding to the input tag using the same id
        >
          <i className={cx(fontStyles.fa, fontStyles['fa-image'])} />
        </label>
      </div>
    )
  }
}

您可以在此處找到有關<label />標簽的更多信息。