Closed pointhalo closed 2 years ago
setValue [{ name: '1-name', type: '1-type' }, {.name: '3-name', type: '3-type'}]
[{ name: '1-name', type: '1-type' }, {.name: '', type: ''}]
class ManualArrayField extends React.Component { constructor() { super(); this.state = { initValues: { effects: [ { name: 'A1-name', type: 'A1-type', key: 0 }, { name: 'A2-name', type: 'A2-type', key: 1 }, { name: 'A3-name', type: 'A3-type', key: 2 }, ] } }; this.id = 3; this.getFormApi = this.getFormApi.bind(this); this.add = this.add.bind(this); this.remove = this.remove.bind(this); this.renderItems = this.renderItems.bind(this); } getFormApi(formApi) { this.formApi = formApi; } add(obj) { let effects = this.formApi.getValue('effects'); if (!effects) { effects = []; } effects.push({ name: '', type: '', key: this.id++ }); this.formApi.setValue('effects', effects); } remove(key) { let effects = this.formApi.getValue('effects'); effects = effects.filter((effect, index) => key !== effect.key); if (!effects.length) { effects = undefined; } this.formApi.setValue('effects', effects); } renderItems(formState, values) { return values.effects && values.effects.map((effect, i) => ( <div key={effect.key} style={{ width: 1000, display: 'flex' }}> <Form.Input field={`effects[${i}].name`} style={{ width: 200, marginRight: 16 }} /> <Form.Select field={`effects[${i}].type`} style={{ width: 90 }}> <Form.Select.Option value="2D">2D</Form.Select.Option> <Form.Select.Option value="3D">3D</Form.Select.Option> </Form.Select> <Button type="danger" onClick={() => this.remove(effect.key)} style={{ margin: 16 }}>Remove</Button> </div> )); } render() { let { initValues } = this.state; return ( <Form getFormApi={this.getFormApi} initValues={initValues} style={{ width: 500 }} labelPosition="left" labelWidth="180px" > {({ formState, values }) => ( <> <Button onClick={this.add}>add</Button> {this.renderItems(formState, values)} <div> {JSON.stringify(formState)} </div> </> )} </Form> ); } }
fix 2.6.0-beta.0
Which Component 出现bug的组件
semi-ui version
Expected result 期望的结果是什么
Actual result 实际的结果是什么
setValue [{ name: '1-name', type: '1-type' }, {.name: '3-name', type: '3-type'}]
后, 实际得到的是[{ name: '1-name', type: '1-type' }, {.name: '', type: ''}]
Steps to reproduce 复现步骤
Reproducible code 复现代码
Additional information 补充说明