Как получить входное значение, когда компонент является componentDidMounting в React? - PullRequest
Новая
       12

Как получить входное значение, когда компонент является componentDidMounting в React?

0 голосов
/ 13 июня 2019

Я хочу получить атрибут RadioButton при первом запуске страницы (например, при первом вызове componentWillMount ()) Я буду сравнивать эту проблему с JQuery. 

$(function() {
  var radioAttr = $('#radioButton_id').find("option:selected").val()
});

Я хочу реализовать исходный код JQuery для React Hooks. если вы знаете, как, пожалуйста, помогите мне .. 

const UserEdit = ({ classes, ...props }) => {

    const types = [
        {id:'INDIVIDUAL'},
        {id:'COMPANY'}
    ];

    const [ checked, setChecked ] = useState(true);

    const onClickRadioBtn = (event,id) => {
        (id === "COMPANY") ? setChecked(false) : setChecked(true)
    };

    useEffect(()=>{
        **/* get radioButton attr */**
    });

    return(
        <Edit {...props}>
            <SimpleForm>
                <TextInput source="username" validate={required()}/>
                <TextInput source="email" validate={[required(),email()]}/>
                <TextInput source="phoneNumber" validate={[required(),minLength(10),number()]}/>
                <RadioButtonGroupInput label="Type"
                                       source="userType"
                                       choices={types}
                                       optionText="id"
                                       validate={required()}
                                       onChange={onClickRadioBtn}
                />
                { !checked && (
                    <ReferenceInput label="Company" source="company.id" reference="companies" validate={required()}>
                        <SelectInput optionText="name"/>
                    </ReferenceInput>
                )}
            </SimpleForm>
        </Edit>
    );
};

1 Ответ

0 голосов
/ 13 июня 2019

Оберните RadioButtonGroupInput в div и дайте div a ref проп.Мы также создадим новую переменную с именем nodes для хранения элемента 

const UserEdit = ({ classes, ...props }) => {
    const nodes = {}

    const types = [
        {id:'INDIVIDUAL'},
        {id:'COMPANY'}
    ];

    const [ checked, setChecked ] = useState(true);

    const onClickRadioBtn = (event,id) => {
        (id === "COMPANY") ? setChecked(false) : setChecked(true)
    };

    useEffect(()=>{
         //get the element we passed, our input will be the first child
        let input = nodes.example.children[0] ? nodes.example.children[0] : null;
        console.log(input.getAttribute("type"));
    }, []);

    return(
        <Edit {...props}>
            <SimpleForm>
                <TextInput source="username" validate={required()}/>
                <TextInput source="email" validate={[required(),email()]}/>
                <TextInput source="phoneNumber" validate={[required(),minLength(10),number()]}/>

            <div ref={elem => (nodes["example"] = elem)}>
                 <RadioButtonGroupInput label="Type"
                       source="userType"
                       choices={types}
                       optionText="id"
                       validate={required()}
                       onChange={onClickRadioBtn}
                />
            </div>

            { !checked && (
                <ReferenceInput label="Company" source="company.id" reference="companies" validate={required()}>
                    <SelectInput optionText="name"/>
                </ReferenceInput>
            )}
        </SimpleForm>
    </Edit>
   );
};

Вот песочница, например: https://codesandbox.io/s/romantic-mcnulty-qqpbs

...