Question

我发现下面的代码有意义，它只是在用户上传文件时显示文件名但我得到的错误是无法读取未定义文件名的属性？为什么？是不是我首先将filename设置为null？

export default class fileUpload extends Component {
    constructor(props) {
        super(props);

        React.defaultProps = {
            filename: null
        }
    }

    handleOnChange = (e) => {
        this.setState({filename: e.target.files[0].name})
    }

    render() {
        return(
            <div>
                <input type="file" onChange={this.handleOnChange}/>
                {this.state.filename && <span className="filename-placeholder">{this.state.filename}</span>}
            </div>
        )
    }
}

Answer 1

包括这一行，它将起作用：

constructor(props) {
    super(props);
    this.state = {};   //line
    React.defaultProps = {
        filename: null
    }
}

您需要在构造函数中定义state。

几点建议：

1。 defaultProps用于设置props的默认值，而不是默认值state变量。此处不需要defaultProps，因为您使用的是state变量。检查示例。

2. 您将类名定义为fileUpload（以小写字母开头），而不是使用FileUpload（以大写字母开头。）

检查工作示例：

＆＃13;

class FileUpload extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
           filename: null
        }
    }

    handleOnChange = (e) => {
        this.setState({filename: e.target.files[0].name})
    }

    render() {
        return(
            <div>
                <input type="file" onChange={this.handleOnChange}/>
                {this.state.filename && <span className="filename-placeholder">{this.state.filename}</span>}
            </div>
        )
    }
}

ReactDOM.render(<FileUpload/>, document.getElementById('app'))

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

＆＃13;

无法使用反应中的状态读取null属性

1 个答案: