Question

可以在此div <div className="error_msg">error msg here</div>

中的所有者“SignIn”组件之外显示错误消息

SignIn = React.createClass({
    getInitialState() {
        return {
            password: null,
            valid: false
        }
    },

    checkRequired(value) {
        return !!value.trim();
    },

    checkPasswordsMatch(value) {
        var match = this.refs.password.getValue() === value;
        this.setState({
            valid: match,
            password: value
        });
        return match;
    },

    render() {
        return (
        <div>
            <div className="error_msg">error msg here</div>
            <form autoComplete="off">
                <Input
                    ref="password"
                    name="password"
                    placeholder="Password"
                    errorMessage="Password is required"
                    validate={this.checkRequired}
                />
                <Input
                    name="confirmPassword"
                    placeholder="Confirm password"
                    errorMessage="Passwords do not match"
                    validate={this.checkPasswordsMatch}
                />
                <button type="submit">Submit</button>
            </form>
        </div>
        )
    }
});

Input = React.createClass({
    getInitialState() {
        return {
            hasChanged: false,
            valid: false
        }
    },
    handleChange(event) {
        if (this.props.validate) {
            this.setState({
                valid: this.props.validate(event.target.value)
            });
        }

        this.setState({
            hasChanged: true
        });
    },

    getValue() {
        //return this.refs.input.value; // For React 0.14+
        return this.refs.input.getDOMNode().value;
    },

    render() {
        return (
            <div>
                <input
                    ref="input"
                    name={this.props.name}
                    placeholder={this.props.placeholder}
                    onChange={this.handleChange}
                />
                {this.state.hasChanged && !this.state.valid && <InputError errorMessage={this.props.errorMessage} />}
            </div>
        )
    }
});

InputError = React.createClass({
    render() {
        return (
            <div>{this.props.errorMessage}</div>
        )
    }
})

React.render(<SignIn />, document.body);

https://jsbin.com/memukazugu/edit?js,output

Answer 1

您需要做的是在组件之间共享状态。

如果你想与另一个组件共享状态而不通过共同的祖先传递它 - 可能因为最近的共同祖先被远离 - 你可以管理一个集中的应用程序状态。

集中式应用程序状态允许您在组件之间共享状态，而无需担心它们彼此之间的关系。只要您将它们连接到集中式应用程序状态，他们就可以收听并更新他们感兴趣的值。

管理集中式应用状态的一些框架是Baobab，Flux Redux。第一个比其他人简单得多，但仍然支持大多数用例。

Reactjs在不同的组件中显示错误消息

1 个答案: