Question

创建应用程序以从本地目录上传文件，这对我来说是成功的。在开始添加一些样式和功能之前，我遇到了一些问题。在<input> + <label>之间建立连接之后。

<input
  id="file"
  type="file"
  name="selectedFile"
  onChange={this.onChange}
/>
<label htmlFor="file">{file}</label>

目标是使文本呈现在标签标签上，而不是在onChange事件函数之后进行实际输入。

在三元条件为fileName（来自状态）和file之后，它们都默认设置为null。由于未选择任何文件，因此条件设置为false，并且文本“选择文件”将显示在<label>上。

render() {
  const { fileName } = this.state;
    let file = null;

    file = fileName 
      ? ( <span>File Selected - {fileName[0]}</span>) 
      : ( <span>Choose a file...</span> );

任何时候用户在<label>上选择涂有“选择文件”的文字。它会触发onChange函数在浏览器的前面弹出文件目录。从列表中选择文件后，条件变为true。并且应在<label> 例如 something.jpg ...

上绘制实际文件名

<label htmlFor="file">{file}</label>

我什么也没得到，对我来说并不成功...但是，我强烈怀疑它与这种语法fileName[0] ...

有关

<span>File Selected - {fileName[0]}</span>)

我可能错了。有什么建议么？预先感谢

完整语法...

export default class Form extends Component {
  state = {
     fileName: '',
  };

  onChange = e => {
    switch (e.target.name) {
      case 'fileName':
        this.setState({ fileName: e.target.files[0] });
      break;
      default:
        this.setState({ [e.target.name]: e.target.value });
     }
  };

render(){
   const { fileName } = this.state;
   let file = null;

   file = fileName 
      ? ( <span>File Selected - {fileName[0]}</span>) 
      : ( <span>Choose a file...</span> );

   return(
      <form onSubmit={this.onSubmit}>
         <div>
            <input
               id="file"
               type="file"
               name="selectedFile"
               onChange={this.onChange}
            />
            <label htmlFor="file">{file}</label>
            </div>
        </form>
     );
  }
}

Answer 1

如果我正确理解了您的问题，那么您似乎要<label />显示用户选择的文件的文件名吗？

这可以通过使用与输入的change事件相关联的文件上的.name属性来实现：

class Form extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
       fileName: '',
    };
  }

  onChange = e => {

    switch (e.target.name) {
      // Updated this
      case 'selectedFile':
        if(e.target.files.length > 0) {
            // Accessed .name from file 
            this.setState({ fileName: e.target.files[0].name });
        }
      break;
      default:
        this.setState({ [e.target.name]: e.target.value });
     }
  };

render(){
   const { fileName } = this.state;
   let file = null;

   file = fileName 
      ? ( <span>File Selected - {fileName}</span>) 
      : ( <span>Choose a file...</span> );

   return(
      <form onSubmit={this.onSubmit}>
         <div>
            <input
               id="file"
               type="file"
               name="selectedFile"
               onChange={ (event) => this.onChange(event) }
            /> { /* Updated this to an arrow function */ }
            <label htmlFor="file">{file}</label>
            </div>
        </form>
     );
  }
}

对于一个有效的示例，see this jsFiddle-希望对您有所帮助！

ReactJS-选定文件时以文本形式呈现文件名

1 个答案: