2

我正在构建一个组件，基本上就像一个复选框，但是是定制的设计。

我的组件就像

class App extends React.Component {
	constructor(props){
		super(props);
		this.state = {
			checked: false
		};
	}
	toggle(){
		this.setState({
			checked: !this.state.checked
		});
	}
	render() {
		return (
			<svg onClick={this.toggle.bind(this)}>
			<circle cx={50} cy={50} r={30} fill={this.state.checked ? "green" : "red"} />
			</svg>
		)
	}
}
ReactDOM.render(<App />, document.getElementById('container'));
<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="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

处理状态的正确方法是什么，以便我可以使用 Mobx 或 Redux 状态管理？换句话说：我怎样才能使这个组件对状态管理不可知，并允许从组件外部更改状态？

4

2 回答 2

3

看看React 的表单元素 API。对于自定义组件，类似的方法似乎是合理的。

React 的表单元素有两种基本的操作模式，受控和不受控。

受控：组件公开一个value属性和一个onChange处理程序。它不处理自己的状态，但始终表示由 确定的状态value。如果用户切换复选框，您将调用更改处理程序，并且包装组件的任务是相应地更改value属性。

不受控制：组件还公开了一个onChange处理程序，但没有value属性。它处理自己的状态，基本上只通过更改处理程序通知包装组件有关更改的状态。initialValue您将使用该属性传递一个初始值。

哪种方法更适合您的需求取决于您的用例。通常，受控组件是推荐的方法。

于 2016-11-03T19:40:54.877 回答
1

作为 TimoSta 回答的后续行动，我认为快速演示他的建议如何实施会很有帮助：

import React from "react";

class ControlledCheckbox extends React.Component {

    constructor(props) {
        super(props);

        this.onChange = this.onChange.bind(this);
    }

    onChange() {
        if (this.props.onChange) {
            this.props.onChange(!this.props.value);
        }
    }

    render() {
        return (
            <div onClick={this.onChange}>
                {this.props.value ? "✓" : "✗"}
            </div>
        );
    }

}

请注意，此组件不保存任何状态 - 它只是接受一个值并将事件传递回去。

于 2016-11-04T17:01:50.610 回答