javascript - React - 如何在组件内打印输入 onChange 的值

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>;
  }

}