如何在React.js中控制文件或文件夹名？

npx create-react-app my-app
cd my-app
npm start

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

render() {
  return (
    <div>
      <h1>文件名：{this.state.fileName}</h1>
      <h1>文件夹名：{this.state.folderName}</h1>
    </div>
  );
}

handleChange(event) {
  this.setState({ fileName: event.target.value });
}

render() {
  return (
    <div>
      <input type="text" value={this.state.fileName} onChange={this.handleChange} />
      <h1>文件名：{this.state.fileName}</h1>
    </div>
  );
}

changeFileName() {
  this.setState({ fileName: 'new_file.txt' });
}

render() {
  return (
    <div>
      <button onClick={this.changeFileName}>更改文件名</button>
      <h1>文件名：{this.state.fileName}</h1>
    </div>
  );
}