表头与行的联动及数据处理

标签：与行 selectedReason 表头 item reason value 数据处理 const inputedReason

 

 下拉框组件

两个功能：（1）可以接收父组件的值（2）修改的时候可以把值传给父组件

特殊：有自定义的功能

 

 

<Select value={selectedValue} onChange={(value) => { 　　setSelectedValue(value) 　　onChange({ 　　　　selectedReason: value, 　　　　inputedReason: inputedReason 　　}) }} placeholder="Select One" style={{ width: '100%' }}> 　　// 从接口获取数据的选项 　　{reasonOptions.map((item) => ( 　　　　<Select.Option key={item.value} value={item.value}> 　　　　　　{item.label} 　　　　</Select.Option> 　　))} 　　// 自定义的选项 　　<Select.Option value="">Other (specify reason)</Select.Option> </Select> {selectedValue === '' && ( 　　<Input.TextArea 　　　　value={inputedValue} 　　　　onChange={(e) => { 　　　　　　setInputedValue(e.target.value) 　　　　　　onChange({ 　　　　　　　　inputedReason: e.target.value, 　　　　　　　　selectedReason: selectedReason 　　　　　　}) 　　　　}} 　　　　placeholder="Enter Reason"　　 　　　　rows={3} 　　　　style={{marginTop: '12px',}} /> )}

父组件传入三个参数 （1）selectedReason 选择 （2）inputedReason 输入 （3）onChange事件

需要区别对待，设有inputValue和selectValue

const [selectedValue, setSelectedValue] = useState<string>() const [inputedValue, setInputedValue] = useState<string>()

// 接收selectReason

useEffect(() => { 　　selectedReason && setSelectedValue(selectedReason) }, [selectedReason]) // 接受inputReason
useEffect(() => { 　　if (inputedReason) { 　　　　setSelectedValue('') 　　　　setInputedValue(inputedReason) 　　}else{ 　　　　setInputedValue('') 　　} }, [inputedReason]) 完整代码 const ReasonSet: React.FC<Props> = ({ selectedReason, inputedReason, onChange }) => { const [selectedValue, setSelectedValue] = useState<string>() const [inputedValue, setInputedValue] = useState<string>() const [reasonOptions, setReasonOptions] = useState<SelectOptionType[]>([]) useEffect(() => { // setOptionsFromApi下拉框组件，抽时间整理 setOptionsFromApi(getQueryCloseReasonList, setReasonOptions, { 　　label: 'name', 　　value: 'qcr_guid', 　　}) }, [])
useEffect(() => { 　　selectedReason && setSelectedValue(selectedReason) }, [selectedReason])
useEffect(() => { 　　if (inputedReason) { 　　　　setSelectedValue('') 　　　　setInputedValue(inputedReason) 　　} else { 　　　　setInputedValue('') 　　} }, [inputedReason])
return ( <> <Select value={selectedValue} onChange={(value) => { 　　setSelectedValue(value) 　　onChange({ 　　　　selectedReason: value, 　　　　inputedReason: inputedReason, 　　}) }} placeholder="Select One" style={{ width: '100%' }} > {reasonOptions.map((item) => ( <Select.Option key={item.value} value={item.value}> 　　{item.label} </Select.Option> ))} <Select.Option value="">Other (specify reason)</Select.Option> </Select>
{selectedValue === '' && ( <Input.TextArea 　　value={inputedValue} 　　onChange={(e) => { 　　　　setInputedValue(e.target.value) 　　　　　　onChange({ 　　　　i　　nputedReason: e.target.value, 　　　　　　selectedReason: selectedReason, 　　　　}) 　　}} 　　placeholder="Enter Reason" 　　rows={3} 　　style={{ 　　　　marginTop: '12px', 　　}} /> )} </> ) } 父组件 调用 // 表头 <Modal title="Reason For Closing" visible={reasonModalVisible} okText="Continue" onCancel={() => setReasonModalVisible(false)} onOk={handleReason}> 　　<ReasonSet onChange={(reason: any) => handleAllChangeReason(reason)} /> </Modal> // 表格item <Table.Column 　　title={titleNode} 　　fixed 　　width={190} 　　render={(_: any, record: QueryData) => 　　　　record.close_reason ? ( 　　　　　　<span>{record.close_reason}</span> 　　　　　) : ( 　　　　　　<ReasonSet 　　　　　　　　inputedReason={record.inputedValue} 　　　　　　　　selectedReason={record.selectedValue} 　　　　　　　　onChange={(reason) => handleChangeReason(record.q_guid, record.sfv_guid, reason)} 　　　　　　/> 　　　　　) 　　} /> // 初始化列表数据 const loadList = () => { 　　getQueryList({ 　　page_size: pageSize, 　　page_num: pageNum, 　　...getParams(filterData), }).then(({ message: msg, result, status }) => { 　　if (status !== 200) { 　　　　return message.error(msg) 　　} 　　setQueryList( 　　　　result.data_list.map((item: any) => ({ 　　　　...item, 　　　　inputedValue: '', 　　　　selectedValue: undefined, 　　})), ) setListCount(result.total_count) }) }   // 批量关闭原因 const handleAllChangeReason = (reason: any) => { 　　if (reason.selectedReason) { 　　　　setAllSelectedReason(reason.selectedReason) 　　　　setAllInputedReason('') 　　} else { 　　　　setAllInputedReason(reason.inputedReason) 　　　　setAllSelectedReason('') 　　} } // 批量关闭原因弹窗确认 const handleReason = () => { 　　// 改变Select选项的方法，对queryList做处理 　　const copiedQueryList = [...queryList] 　　copiedQueryList.map((item: any) => { 　　　　selectedRowKeys.map((row: any) => { 　　　　　　if (item.q_guid === row) { 　　　　　　　　item.inputedValue = allInputedReason 　　　　　　　　item.selectedValue = allSelectedReason 　　　　} 　　}) }) setQueryList(copiedQueryList) setReasonModalVisible(false) } // 单个关闭原因 const handleChangeReason = (queryGuid: string, sfvGuid: string, reason?: { selectedReason?: string; inputedReason?: string }) => { 　　const copiedQueryList = [...queryList] 　　copiedQueryList.map((item: any) => { 　　　　selectedRowKeys.map((row: any) => { 　　　　　　if (item.q_guid === queryGuid) { 　　　　　　if (reason?.selectedReason) { 　　　　　　　　item.inputedValue = '' 　　　　　　　　item.selectedValue = reason?.selectedReason 　　　　　　} else { 　　　　　　　　item.selectedValue = '' 　　　　　　　　item.inputedValue = reason?.inputedReason 　　　　　　} 　　　　} 　　}) }) setQueryList(copiedQueryList) } 总结: 数据的改变始终是在初始化数据的基础上进行改变，不论是批量改变还是单个改变，都应该统一改变一个字段（如果初始数据上没有，可以自己添加），如果只考虑改变了哪些数据，有些局限性，比如在这个场景中，在事件中我只能拿到guid和reason，但是后端还需要sfv_guid，我是没有办法拿到的。

标签：与行,selectedReason,表头,item,reason,value,数据处理,const,inputedReason
From： https://www.cnblogs.com/liiann/p/16703325.html