React - 将动态值传递给儿童

Question

我有一个应用程序通过标准的<input type="file"/>上传文件。我试图将所选文件的文件大小传递给孩子，以查看它是否超过特定大小，如果是，则显示错误。我知道你必须将状态值作为道具传递下来，但我不确定在哪里/如何调用函数来获取更新的值。任何帮助表示赞赏。

编辑：我正在使用反应jsonschema窗体来构建窗体：https://github.com/mozilla-services/react-jsonschema-form。在Parent类之前声明模式。

家长

const schema = { 
    type: 'object', 
    required: ['file'], 
    properties: { 
     file: { type: 'string', format: 'data-url', title: 'File' } 
    } 
} 

const FileWidget = (props) => { 
    return (
     <input type="file" id="fileName" required={props.required} onChange={(event) => props.onChange(event.target.value)} /> 
    ) 
} 

const uiSchema = { 
    file: { 
     'ui:widget': FileWidget, 
     classNames: "uiSchema" 
    } 
} 


class Parent extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { fileSize: 0 }; 
     this.getFileSize = this.getFileSize.bind(this); 

    getFileSize(){ 
     this.setState({fileSize: document.getElementById("fileName").files[0].size}); 
     console.log("FILESIZE:: ", this.state.fileSize); 
    } //where to call to update the file size? 

    render() { 

     return (
      <div className="container"> 
      <FileUpload schema={schema} uiSchema={uiSchema} fileSize={this.state.fileSize} /> 
      </div> 
     ) 
    } 
} 

export default Parent; 

儿童

class Child extends Component { 
constructor(props) { 
    super(props); 
    this.state = { formData: {} }; 
    this.handleSubmit = this.handleSubmit.bind(this); 
} 

render() { 
    return (
     <div className="container"> 
      <Form 
       schema={this.props.schema} 
       uiSchema={this.props.uiSchema} 
       formData={this.state.formData} 
       onChange={({ formData }) => this.setState({ formData })} 
       onSubmit={this.handleSubmit} 
      > 
       <div> 
        <button type="submit" className="btn btn-info">Convert</button> 
       </div> 
      </Form>    
      <div hidden={this.props.fileSize > 100 ? false : true }><h4>File size exceeded.</h4></div> 
     </div> 
    ) 
} 
} 

export default Child; 

Answer 1

得到它的工作。通过函数孩子：

<FileUpload fileSize={this.getFileSize.bind(this)} /> 

然后在孩子加了setState到窗体的onChange调用的函数：

onChange={({ formData }) => { this.setState({ formData }); this.setState({fileSize:this.props.fileSize()})}} 

，并相应地显示错误消息：

<div style={{display: this.state.fileSize > 100 ? "block": "none" }><h4>File size exceeded.</h4></div> 

Answer 2

class Parent extends Component { 
     constructor(props) { 
      super(props); 
      this.state = { fileSize: 0 }; 
      this.getFileSize = this.getFileSize.bind(this); 

     getFileSize(){ 
      this.setState({fileSize: document.getElementById("fileName").files[0].size}); 
      console.log("FILESIZE:: ", this.state.fileSize); 
     } //where to call to update the file size? 

    componentDidMount(){ 
    // you can call the getFilesize here   
    this.getFileSize(); 
    } 

     render() { 

      return (
       <div className="container"> 
       <FileUpload fileSize={this.state.fileSize} /> 
       </div> 
      ) 
     } 
    } 

    export default Parent; 

子组件

class FileUpload extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { formData: {} }; 
     this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    render() { 
     return (
      <div className="container"> 
       <Form 
        formData={this.state.formData} 
        onChange={({ formData }) => this.setState({ formData })} 
        onSubmit={this.handleSubmit} 
       > 
        <div> 
         <button type="submit" className="btn btn-info">Convert</button> 
        </div> 
       </Form>    
       <div style={{display:this.props.fileSize > 100 ? "block": "none" }><h4>File size exceeded.</h4></div> 
      </div> 
     ) 
    } 
    } 

    export default FileUpload; 

我想你想显示错误消息时文件大小超过给定大小

你也可以使用componentWillMount调用getfilesize 它实际上取决于document.getElementById("fileName") 它是特定元素的时候填充数据你的父母componentWill安装就可以使用componentWillMount生命周期挂钩

Answer 3

父组件

class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {}; 
    } 
    onFileSelected(e) { 

    var fileSize = e.target.files.length > 0 ? e.target.files[0].size : false; 
    if (fileSize) 
     this.setState({ fileSize }); 

    } 
    render() { 

    return (
     <div className="App"> 
     <input type="file" onChange={this.onFileSelected.bind(this)} /> 
     <FileUpload fileSize={this.state.fileSize}></FileUpload> 
     </div> 
    ); 
    } 
} 

子组件

class FileUpload extends Component { 
    render() { 

    return (
     <div> 
     {this.props.fileSize > 100 ? <h2 >File size exceeds 100</h2> : null} 
     </div> 

    ); 
    } 
} 

在上面的代码中wh在我做的是在父组件中创建<input type="file"/>并将onchange事件附加到它。