由于执行错误，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 />标签的更多信息。