Мне нужна простая «обязательная» проверка для «act-select »(github repo). В последней версии используется подход css-in-js. Итак, у меня есть собственные стили:

export const customStyles = {


 control: (base, state) => ({
        ...base,
    }),

    menu: (base, state) => ({
        ...base,
    }),

    menuList: (base, state) => ({
        ...base,
    }),
}

Как я могу изменить, например, borderColor если поле неверно?

2
Dmitry Stril 21 Авг 2018 в 17:50

3 ответа

Лучший ответ

На данный момент существует проблема, открытая на GitHub.

Я вижу два разных подхода:

  1. «ленивый», где вы меняете цвет границы, добавляя определенный className. Пример здесь.
  2. Поскольку вы хотите настроить исходный выбор, я бы порекомендовал вставить ваш customSelect в отдельный файл. Затем вы можете передать реквизит isValid и использовать его для изменения своего borderColor.
class CustomSelect extends React.Component {
  render() {
    const {
      isValid
    } = this.props
    
    const customStyles = {
      control: (base, state) => ({
        ...base,
        // state.isFocused can display different borderColor if you need it
        borderColor: state.isFocused ?
          '#ddd' : isValid ?
          '#ddd' : 'red',
        // overwrittes hover style
        '&:hover': {
          borderColor: state.isFocused ?
            '#ddd' : isValid ?
            '#ddd' : 'red'
        }
      })
    }
    return <Select styles={ customStyles } {...this.props}/>
  }
}
5
Laura 22 Авг 2018 в 15:26

Render.js

export const renderSelect = (props) => (
<div>
    <Select
    {...props}
    value={props.input.value}
    onChange={(value) => props.input.onChange(value)}
    onBlur={() => props.input.onBlur(props.input.value)}
    options={props.options}
    key={props.input.value}
    />
    {props.meta.touched && (props.meta.error && <p  style={{ color: "red",fontSize:"12px" }}>{props.meta.error}</p>)}
</div>

) ;

ImplementForm.js

<Field 
                name="sex" 
                component={renderSelect} 
                options={Status}
                isClearable={true}
                validate={required}
              />

RequiredFileMessage.js

const required = value => value ? undefined : 'Required'
0
Arunkumar Subramani 28 Янв 2020 в 12:49

Помощь для тех, кто не хочет все время добавлять коды только для этой обязательной проверки в react-select. Просто используйте react-hook-form-input.

<RHFInput
   as={<Select options={options} />}
   rules={{ required: 'Please select an option'}}
   name="reactSelect"
   register={register}
   setValue={setValue}
/>

Где этот RHFInput из react-hook-form-input был просто спасением для меня .. Полный пример - react-hook-form-input.

import React from 'react';
import useForm from 'react-hook-form';
import { RHFInput } from 'react-hook-form-input';
import Select from 'react-select';

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
];

function App() {
  const { handleSubmit, register, setValue, reset } = useForm();

  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      <RHFInput
        as={<Select options={options} />}
        rules={{ required: 'Please select an option'}}
        name="reactSelect"
        register={register}
        setValue={setValue}
      />
      <button type="button">Reset Form</button>
      <button>submit</button>
    </form>
  );
}

Надеюсь, это поможет кому-то вроде меня как новичка в реакции.

0
Maniruzzaman Akash 18 Мар 2020 в 16:44
51951379