小编Jer*_*ela的帖子

通过this.history.pushState()传递状态

我正在使用react-router 1.0和他们的历史集成.

import { createHistory, useBasename } from 'history'

const history = useBasename(createHistory)({
    basename: '/base-path'
});

export default (
    <Router history={history}>
        <Route path="/" component={require("Template")}>
            <Route path="sub-page" component={require("SubPage")}/>
        </Route>
    </Router>
);
Run Code Online (Sandbox Code Playgroud)

我正在尝试从API和URL中删除ID,并在JSON对象中传递HATEOAS创建的自我链接.我想通过pushState状态参数传递数据.

onClickEditButton(selfLinkObject) {
    this.history.pushState(selfLinkObject, "/my/url");
}
Run Code Online (Sandbox Code Playgroud)

但是当我试图获得状态时,它没有被传递.

import React from "react"
import { History } from "react-router"

export default React.createClass({
    mixins: [History],
    componentDidMount() {
        console.log(this.state);
        console.log(this.history.state);
        console.log(history.state);
    },
    render() {
        <p>Check the console to see if the state is passed from the pushState(state, url, params);</p>
    }
});
Run Code Online (Sandbox Code Playgroud)

根据 …

react-router

14
推荐指数
1
解决办法
3万
查看次数

如何使用带有点“.”的输入名称的 Formik?

我无法用handleChange点“.”更新输入。在名字里。有人解决这个问题了吗?

<Formik component={({
  handleSubmit,
  handleChange,
  handleBlur,
  values,
  errors,
}) => (
  <form onSubmit={handleSubmit}>
    <input
      type="text"
      onChange={handleChange}
      onBlur={handleBlur}
      value={values['name.of.input']}
      name="name.of.input"
    />
    {errors['name.of.input'] && <div>{errors['name.of.input']}</div>}
    <button type="submit">Submit</button>
  </form>
)} />;
Run Code Online (Sandbox Code Playgroud)

编辑:这是有效的重构版本

<Formik component={({
  initialValues={{
    name: {
      of: { 
        input: ''
      }
    }
  }},
  handleSubmit,
  handleChange,
  handleBlur,
  values,
  errors,
}) => (
  <form onSubmit={handleSubmit}>
    <input
      type="text"
      onChange={handleChange}
      onBlur={handleBlur}
      value={values.name.of.input}
      name="name.of.input"
    />
    {getIn(errors, 'name.of.input') && <div>getIn(errors, 'name.of.input')</div>}
    <button type="submit">Submit</button>
  </form>
)} />;
Run Code Online (Sandbox Code Playgroud)

reactjs formik

6
推荐指数
1
解决办法
2340
查看次数

标签 统计

formik ×1

react-router ×1

reactjs ×1