一个反应中的多个形式值反冲原子相互覆盖

Question

有没有办法在一个反冲原子中保存多个表单输入值？我一直试图添加两个表单字段值，但它们只是相互覆盖。

我有一个登记表，它有两个字段；电子邮件和电话。

我的（简化的）表单组件看起来是这样的；

import { atom, useSetRecoilState, useRecoilValue } from 'recoil';

const registerAtom = atom({
    key: 'register',
    default: [],
});

function Registration() {
    const setEmail = useSetRecoilState(registerAtom);
    const email = useRecoilValue(registerAtom);

    const setPhone = useSetRecoilState(registerAtom);
    const phone = useRecoilValue(registerAtom);

    return (
        <>
            <form>
                <input name="email" type="text" className="form-control" value={email} onChange={e => setEmail(e.target.value)} placeholder="Email Address" />
                <input name="phone" type="text" className="form-control" value={phone} onChange={e => setPhone(e.target.value)} placeholder="Phone Number" />
            </form>
        </>
    )
}

Answer 1

您的atom有一个值寄存器在开始时保存一个数组，然后用输入的值分配。

两个inputs设置原子注册表项的状态，使其相互覆盖。

您需要做的是将一个对象作为寄存器的值保存，该对象有两个键：email和phone。然后，您可以使用已更改的特定输入中的相关值更新每个键。

所以。而不是：

const registerAtom = atom({
    key: 'register',
    default: [],
});

创建这个atom：

const registerAtom = atom({
    key: 'register',
    default: {
        email: '',
        phone: ''
    },
});

这为电子邮件和电话创建了初始值为空字符串的对象。

现在，您可以像这样定义set函数：

const setRegistrationInfo = useSetRecoilState(registerAtom);
const registrationInfo = useRecoilValue(registerAtom);

最后，您需要做的就是在设置对象的状态时更改对象的特定键。确保您正在创建一个新的对象，因为您正在更新一个状态，而该状态需要一个新的更新对象，所以我们将使用对象。分配：

        <form>
            <input name="email" type="text" className="form-control" value={registrationInfo.email} onChange={e => setRegistrationInfo(Object.assign(registrationInfo, {email: e.target.value}))} placeholder="Email Address" />
            <input name="phone" type="text" className="form-control" value={registrationInfo.phone} onChange={e => setRegistrationInfo(Object.assign(registrationInfo, {phone: e.target.value}))} placeholder="Phone Number" />
        </form>

最终代码：

import { atom, useSetRecoilState, useRecoilValue } from 'recoil';

const registerAtom = atom({
    key: 'register',
    default: {
        email: '',
        phone: ''
    },
});

function Registration() {

    const setRegistrationInfo = useSetRecoilState(registerAtom);
    const registrationInfo = useRecoilValue(registerAtom);

    return (
        <>
            <form>
                <input name="email" type="text" className="form-control" value={registrationInfo.email} onChange={e => setRegistrationInfo(Object.assign(registrationInfo, {email: e.target.value}))} placeholder="Email Address" />
                <input name="phone" type="text" className="form-control" value={registrationInfo.phone} onChange={e => setRegistrationInfo(Object.assign(registrationInfo, {phone: e.target.value}))} placeholder="Phone Number" />
            </form>
        </>
    )
}

Answer 2

如果您确信永远不需要独立地读取或写入电子邮件和电话状态，一种简单的方法是使用带有对象值的单个原子（这相当于使用React的useStatehook带有对象值）：

import {atom} from 'recoil';

const contactInfoState = atom({
  key: 'contactInfo',
  default: {
    email: '',
    phone: '',
  },
});

然后，像这样使用（每次更新整个对象）：

import {useRecoilState} from 'recoil';

function Registration () {
  const [{email, phone}, setContactInfo] = useRecoilState(contactInfoState);
  
  return (
    <form>
      <input
        type="text"
        value={email}
        onChange={ev => setContactInfo({email: ev.target.value, phone})}
        placeholder="Email Address"
      />
      <input
        type="text"
        value={phone}
        onChange={ev => setContactInfo({email, phone: ev.target.value})}
        placeholder="Phone Number"
      />
    </form>
  )
}

然而，惯用的方法是使用选择器将原子组成atom，它可以提供一起读取和写入值的方法（就像上面的示例中那样），但仍然允许使用原子独立地读取和写入值：

import {atom, DefaultValue, selector} from 'recoil';

const emailState = atom({
  key: 'email',
  default: '',
});

const phoneState = atom({
  key: 'phone',
  default: '',
});

const contactInfoState = selector({
  key: 'contactInfo',
  get: ({get}) => {
    // get values from individual atoms:
    const email = get(emailState);
    const phone = get(phoneState);
    // then combine into desired shape (object) and return:
    return {email, phone};
  },
  set: ({set}, value) => {
    // in a Reset action, the value will be DefaultValue (read more in selector docs):
    if (value instanceof DefaultValue) {
      set(emailState, value);
      set(phoneState, value);
      return;
    }
    // otherwise, update individual atoms from new object state:
    set(emailState, value.email);
    set(phoneState, value.phone);
  },
});

下面是一个完整且独立的示例片段，您可以在此页面上运行该示例来验证它是否有效：

注意：它使用UMD版本的React、ReactDOM和Recoil，因此它们是使用这些名称而不是使用import语句全局公开的。

<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/recoil@0.5.2/umd/recoil.min.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.16.3/babel.min.js"></script>

<div id="root"></div>

<script type="text/babel" data-type="module" data-presets="react">

const {
  atom,
  DefaultValue,
  RecoilRoot,
  selector,
  useRecoilValue,
  useSetRecoilState,
} = Recoil;

const emailState = atom({
  key: 'email',
  default: '',
});

const phoneState = atom({
  key: 'phone',
  default: '',
});

const contactInfoState = selector({
  key: 'contactInfo',
  get: ({get}) => {
    const email = get(emailState);
    const phone = get(phoneState);
    return {email, phone};
  },
  set: ({set}, value) => {
    if (value instanceof DefaultValue) {
      set(emailState, value);
      set(phoneState, value);
      return;
    }
    set(emailState, value.email);
    set(phoneState, value.phone);
  },
});

function Registration () {
  const {email, phone} = useRecoilValue(contactInfoState);
  const setEmail = useSetRecoilState(emailState);
  const setPhone = useSetRecoilState(phoneState);
  
  return (
    <form>
      <input
        type="text"
        value={email}
        onChange={ev => setEmail(ev.target.value)}
        placeholder="Email Address"
      />
      <input
        type="text"
        value={phone}
        onChange={ev => setPhone(ev.target.value)}
        placeholder="Phone Number"
      />
    </form>
  )
}

function DisplayState () {
  const email = useRecoilValue(emailState);
  const phone = useRecoilValue(phoneState);
  return (
    <pre>
      <code>{JSON.stringify({email, phone}, null, 2)}</code>
    </pre>
  );
}

function Example () {
  return (
    <RecoilRoot>
      <Registration />
      <DisplayState />
    </RecoilRoot>
  );
}

ReactDOM.render(<Example />, document.getElementById('root'));

</script>