我下面有一个工作组件,允许全部复选框和复选框。它工作完美。然而,我讨厌这样的想法:每次我想使用此功能时,我都必须携带所有这些代码。我正在寻找一种在 react 中使这个模块化的方法?这是吗
它没有将“输入检查全部”功能的整个功能模块化在一处。我必须在每次使用时移动 getInitialState 变量和changeHandlers。
我认为,如果“全部输入复选框”功能是 HTML 中原生的,我们将如何使用它?我们只需要向元素提供属性,它们就会互相引用,所有处理程序都会在幕后发生,使用起来很简单。我此示例的目标是实现 HTML 级别的简单性。我上面显示的代码没有实现这一点,因为它与函数处理程序和状态初始值设定项绑定(bind)在一起。 React 是否提供了一种抽象方法?
下面是我想要的该组件的 API。
主要问题是:
- 组件功能与父组件无关,这意味着父组件不需要存储处理程序和状态的信息。
- 代码目前手动跟踪每个复选框的状态,这意味着无法在不声明的情况下动态查找 DOM 中有多少个复选框。
- 整体模块化且易于使用。
代码如下:
var InputCheckbox = React.createClass({
getDefaultProps: function () {
return {
checked: false
}
},
render: function () {
return (
<input
checked={this.props.checked}
type='checkbox'
{...this.props}/>
)
}
})
var Test = React.createClass({
getInitialState: function () {
return {
checked: [false, false, false]
}
},
selectAll: function (event) {
// Set all checked states to true
this.setState({
checked: this.state.checked.map(function () {
return event.target.checked
})
})
},
handleChange: function (index, event) {
var checked = this.state.checked
checked[index] = event.target.checked
this.setState({
checked: checked
})
},
render: function () {
var isAllChecked = this.state.checked.filter(function (c) {
return c
}).length === this.state.checked.length
return (
<div>
Select All:
<InputCheckbox onChange={this.selectAll} checked={isAllChecked}/>
<br/>
<InputCheckbox checked={this.state.checked[0]} onChange={this.handleChange.bind(this, 0)}/>
<br/>
<InputCheckbox checked={this.state.checked[1]} onChange={this.handleChange.bind(this, 1)}/>
<br/>
<InputCheckbox checked={this.state.checked[2]} onChange={this.handleChange.bind(this, 2)}/>
<br/>
</div>
)
}
})
React.render(<Test/>, document.body)
理想情况下我可以像这样使用它:
var Checkbox = require('./Checkbox')
var Test = React.createClass({
render: function () {
return (
<div>
<Checkbox id="alpha"/>
<Checkbox htmlFor="alpha"/>
<Checkbox htmlFor="alpha"/>
<Checkbox htmlFor="alpha"/>
</div>
)
}
})
最佳答案
我认为以下示例处于正确的总体方向,总体思路是为相关框引入一个包装器组件,然后遍历该组件中的子组件将它们连接在一起。
var CheckAll = React.createClass({
render() {
return <input type="checkbox" {...this.props} />
}
});
var Checkbox = React.createClass({
render() {
return <input type="checkbox" {...this.props} />
}
});
var CheckboxGroup = React.createClass({
setAll(to) {
var result = {};
Object.keys(this.props.boxes).forEach(k => result[k] = to)
this.props.onChange(result);
},
setOne(name, to) {
var result = {};
Object.keys(this.props.boxes).forEach(k => result[k] = this.props.boxes[k])
result[name] = to;
this.props.onChange(result);
},
enrichChild(child) {
var boxes = this.props.boxes;
var all = Object.keys(boxes).every(k => boxes[k]);
if (child.type == CheckAll) {
return React.cloneElement(child, { checked: all,
onChange: () => this.setAll(!all)
});
} else if (child.type == Checkbox) {
var name = child.props.name;
return React.cloneElement(child, { checked: !!boxes[name],
onChange: ({target}) => this.setOne(name, target.checked)
});
} else {
return child;
}
},
render() {
return (
<div>
{React.Children.map(this.props.children, this.enrichChild)}
</div>
)
}
});
var Test = React.createClass({
getInitialState: function () {
return {
boxes: {
a: true,
b: false,
c: false,
}
}
},
render: function () {
return (
<div>
<CheckboxGroup
boxes={this.state.boxes}
onChange={boxes => this.setState({boxes})}
>
<CheckAll />
<Checkbox name="a" />
<Checkbox name="b" />
<Checkbox name="c" />
</CheckboxGroup>
</div>
)
}
})
React.render(<Test/>, document.body)
这是一个 jsbin - https://jsbin.com/zomuxolevo/1/edit?js,output
为了让 children 有更大的灵 active ,您需要使用像这样的要点 https://gist.github.com/dandelany/1ff06f4fa1f8d6f89c5e 递归地遍历他们。
var RecursiveChildComponent = React.createClass({
render() {
return <div>
{this.recursiveCloneChildren(this.props.children)}
</div>
},
recursiveCloneChildren(children) {
return React.Children.map(children, child => {
if(!_.isObject(child)) return child;
var childProps = {someNew: "propToAdd"};
childProps.children = this.recursiveCloneChildren(child.props.children);
return React.cloneElement(child, childProps);
})
}
})
关于javascript - 模块化和抽象 react 组件功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32644711/