由于实施错误，反应 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 /> 标签 here 的更多信息。

由于实施错误，反应 createref 返回错误

react createref was returning the error due to wrong implementation

javascript

reactjs

create-ref