Question

这是我的组成部分：

export default function ImageUpload({ onSuccess, children}) {

  let value = '';
  const onUpload = async (element) => {
    element = element.target.files;
    let response;
    // Call endpoint to upload the file 
    value = element[0].name;
    return onSuccess(response.url);   
  };

  return <div>
    <div >
      {children}
      <input type="file" id="upload" onChange={onUpload.bind(this)} />
    </div>
    <span>{value}</span>
  </div>; 
}

我想在跨度内打印从用户中选择的文件的名称。我使用redux作为状态，但这些信息不属于该状态。这种方式不起作用，有人可以解释我为什么吗？

更新由于看起来没有办法在没有状态的情况下实现这一点，我的问题是关于最好的方法：如果我不需要组件外部的这个值，或者使用组件的内部状态但结束同时拥有Redux和这个状态，请使用Redux吗？

Answer 1

我可以考虑改变方法，并将组件转换为类类型组件，类似于：

export default class ImageUpload extends Component {
  constructor() {
    this.state = {
      value: ''
    }
    this.onUpload = this.onUpload.bind(this)
  }

  onUpload() {
    let value = '';
    const onUpload = async (element) => {
      element = element.target.files;
      let response;
      // Call endpoint to upload the file 
      value = element[0].name;
      this.props.onSuccess(response.url);
      this.setState({ value: value })
    };
  }

  render () {
    return <div>
      <div >
        {children}
        <input type="file" id="upload" onChange={this.onUpload} />
      </div>
      <span>{this.state.value}</span>
    </div>;
  }

}

React - 如何在组件

1 个答案: