我对 React 和 MobX 还很陌生。我已经阅读/观看了很多关于 React 以及 React 与 MobX 结合的教程。
我需要创建一个表单,用户可以在其中选择(自动完成)产品。我正在使用 react 选择来做到这一点。当用户选择产品时,界面需要使用所选产品的位置更新另一个选择(我尚未实现,但它将使用可观察到的位置中的选项)。
- 关于如何在 React 元素和 MobX 之间建立通信,是否有任何“最佳实践”?
- “findProduct”和“findLocationAllocationData”被定义为一个操作。这是正确的吗?
感谢您的帮助!
const {observable, action} = mobx;
const {observer} = mobxReact;
class MyStore {
product = observable({value: null});
locations= observable({value: null,options: [],disabled: true});
findProduct = action((input, callback) => {
//ajax call to get products
// JSON object as an example
callback(null, {
options: [{key: 1, value: 1, label: 'product a'},
{key: 2, value: 2, label: 'product b'}
],
complete: true
})
});
findLocationAllocationData = action(() => {
if (null === this.product.value) {
return;
}
//ajax-call to get the locations and to update the location observable options
}
}
还有反应的东西:
class Well extends React.Component {
render() {
return (
<div className = "well" >
<span className = "well-legend" > {this.props.legend} < /span>
{this.props.children}
</div>
);
}
}
class FormGroup extends React.Component {
render() {
return (
<div className = "form-group" >
<label htmlFor = {this.props.labelFor} >
{this.props.label}
</label>
{this.props.children}
</div>
);
}
}
const ProductSelect = observer(class ProductSelect extends React.Component {
onChange = (e = null) => {
this.props.store.product.value = null !== e ? e.value : null;
this.props.store.findLocationAllocationData();
};
getOptions = (input, callback) => {
this.props.store.findProduct(input, callback);
};
render() {
const product = this.props.store.product;
return (
<Select.Async
id = "product"
name = "product"
className = "requiredField"
loadOptions = {this.getOptions}
onChange = {this.onChange}
value = { product.value}
/>
);
}
});
const MyForm = observer(class MyForm extends React.Component {
render() {
const store = this.props.store;
return (
<div>
<form >
<Well legend="Step 1 - Product">
<div className="row">
<div className="col-md-4">
<FormGroup label="Product" labelFor="product">
<ProductSelect store={store} />
</FormGroup>
</div>
</div>
</Well>
</form>
</div>
)
}
});
const myStore = new MyStore();
ReactDOM.render(
<MyForm store={myStore}/>, document.getElementById('root')
);
最佳答案
您的操作函数很好,但您必须注意:操作仅影响当前正在运行的函数。您可能想要创建一个回调操作,例如 findLocationAllocationData-callback
和 findProduct-callback
MobX 不是一种可以按照您的意愿构建代码的架构,没有最佳实践。您可能希望将操作和 API 调用分开。
您可以查看this repo寻找灵感。
关于javascript - react /mobX : best practice,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43143122/