重构Javascript代码-需要重构
重构Javascript代码-需要重构
提问于 2019-07-15 21:28:08
我正在构建一个类似react的KanBan应用程序，通过它我添加了一个“卡片”，并允许用户选择它是否属于“Todo”、“OnProgress”或“Done”列表。一切都很好，但我很确定我所写的函数不是任何最佳实践方法。这是我写的代码，如果有人能提供关于如何修改我的代码的提示/技巧，那就太好了：
这是我的App组件：
class App extends Component {
constructor(props) {
super(props)
this.state = {
columns: [
{
name: 'Todos',
cards: []
},
{
name: 'Onprogress',
cards: []
},
{
name: 'Done',
cards: []
},
]
};
};
addCard = (card) => {
console.log("Adding a Card");
const cards = { ...this.state.columns.cards };
cards[`card${Date.now()}`] = card;
console.log(card.taskStatus)
if (card.taskStatus === 'Todos') {
this.setState({
columns: [
{
name: 'Todos',
cards: cards
},
{
name: 'Onprogress',
cards: []
},
{
name: 'Done',
cards: []
},
]
});
} else if (card.taskStatus === 'Onprogress') {
this.setState({
columns: [
{
name: 'Todos',
cards: []
},
{
name: 'Onprogress',
cards: cards
},
{
name: 'Done',
cards: []
},
]
});
} else {
this.setState({
columns: [
{
name: 'Todos',
cards: []
},
{
name: 'Onprogress',
cards: []
},
{
name: 'Done',
cards: cards
},
]
});
}
};
render() {
return (
<div className="App">
{Object.keys(this.state.columns).map(key => (
<Column key={key} details={this.state.columns[key]} />
))}
<AddCardForm addCard={this.addCard} />
</div>
);
}
}
export default App;
这是我的AddCardForm组件：
class AddCardForm extends Component {
taskName = React.createRef();
taskDescription = React.createRef();
taskPeriod = React.createRef();
taskStatus = React.createRef();
addCardtoApp = event => {
event.preventDefault();
const card = {
taskName: this.taskName.current.value,
taskDescription: this.taskDescription.current.value,
taskPeriod: this.taskPeriod.current.value,
taskStatus: this.taskStatus.current.value,
};
this.props.addCard(card);
event.currentTarget.reset();
};
render() {
return (
<form onSubmit={this.addCardtoApp}>
<label>
Task Name:
<input type="text" name="taskName" ref={this.taskName}/>
</label> <br />
<label>
Description:
<input type="text" name="taskDescription" ref={this.taskDescription} />
</label> <br />
<label>
Period:
<input type="text" name="taskPeriod" ref={this.taskPeriod} />
</label> <br />
<label>
Task Status:
<select type="text" name="taskStatus" ref={this.taskStatus}>
<option value="Todo">Todo</option>
<option value="Onprogress">Onprogress</option>
<option value="Done">Done</option>
</select>
</label> <br />
<input type="submit" value="Submit" />
</form>
);
}
}
export default AddCardForm;
回答 2
Stack Overflow用户
发布于 2019-07-15 21:36:20
首先，你的状态可以分解成3个状态对象，而不是一个数组，因为它们本质上都是命名的。
this.state = {
todo: {
name: 'Todos',
cards: []
},
onProgress: {
name: 'OnProgress',
cards: []
},
done: {
name: 'Done',
cards: []
},
}这将允许您简化addCard函数。
const cardType = card.taskStatus.toLowerCase()
const cards = { ...this.state[cardType].cards }
cards[`card${Date.now()}`] = card
this.setState({ [cardType]: { cards } })我可能借用了setState函数，但其想法应该是显而易见的。
您要做的第二件事是使用ref作为输入值。使用controlled component会容易得多。
最后一个明显的解决方法是去掉表单，转而使用带有绑定操作的按钮。
如果您想遵循语义HTML，表单通常用于向服务器提交信息。按钮元素用于在当前页面内执行操作，锚元素用于将用户导航到新页面(甚至在SPA中)。
因此，如果表单不会将数据发送到其他地方，请避免使用表单。使用按钮调用当前页面上的操作，并使用锚定标记来移动用户。
Stack Overflow用户
发布于 2019-07-15 21:39:52
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57040803
复制相关文章
相似问题
腾讯云开发者
