ReactJS - отображать имя файла в тексте при выделении файла

sirrus спросил: 07 октября 2018 в 11:38 в: javascript

Создание приложения для загрузки файлов из локального каталога, для меня это оказалось успешным. До тех пор, пока я не начну добавлять некоторые стили и функции, у меня возникали некоторые проблемы. после создания связи между <input> + <label>.

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

цель состояла в том, чтобы текст отображался в теге метки вместо фактического ввода после функция события.

Следуя троичному условному условию с onChange (из состояния) и fileName, они оба по умолчанию равны нулю. Поскольку ни один файл не был выбран, условие имеет значение false и текст "Выберите файл" будет отображаться в file.

render() {
  const { fileName } = this.state;
    let file = null;    file = fileName 
      ? ( <span>File Selected - {fileName[0]}</span>) 
      : ( <span>Choose a file...</span> );

В любое время пользователь выбирает нарисовал текст "Выберите файл". он запускает функцию <label>, чтобы папка с файлами появлялась в браузере. Как только файл выбран из списка, условие становится истинным. И должен нарисовать фактическое имя файла на <label> например, что-то.jpg ...

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

I ничего не получилось, у меня ничего не получилось ... Однако я сильно подозреваю, что это как-то связано с этим синтаксисом onChange ...

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

0 ответов