input 子组件封装

input 子组件封装 ，接收的数据不要做额外的state的处理。可能因为异步关系。和加载问题。不能响应及时。

 

interface PriceValue {
    relation?: any;
}
interface PriceInputProps {
    value?: PriceValue;
    onChange?: (value) => void;
}
// 且和或的显示处理
const PriceInput: React.FC<PriceInputProps> = ({ value, onChange }) => {
    console.log(value, '===')
    // 注释部分为错误使用
    // const [relation, setRelation] = useState('');
    // useEffect(() => {
    //     if (value == '1') {
    //         setRelation('且');
    //     } else {
    //         setRelation('或');
    //     }
    // }, [])

    // const triggerChange = (changedValue) => {
    //     console.log('changedValue', changedValue)
    //     const newValue2 = changedValue === '或' ? '0' : '1';
    //     onChange && onChange(newValue2)
    // };

    // const onNumberChange2 = (relation) => {
    //     const changeText = relation.target.innerText == '或' ? '且' : '或'
    //     console.log(changeText, 'changeText')
    //     setRelation(changeText)
    //     triggerChange(changeText);
    //     console.log(relation.target.innerText)
    // }


    const onNumberChange = (relation) => {
        const updatedRelation = relation == '0' ? '1' : '0';
        onChange && onChange(updatedRelation)
    }

    return (
        <span>

            <div onClick={() => onNumberChange(value)} className='my-input'>
                {value == '0' ? '或' : '且'}
            </div>
            {/* <Input
        style={{width:'40px'}}
        type="text"
        readOnly
        value={ relation}
        onClick={onNumberChange}
        /> */}
        </span>
    );
};