Kselax.ru

Hacker Kselax – the best hacker in the world

Menu
  • Blog
  • Contacts
  • wp plugin generator
  • English
    • Русский
Menu

Reactjs sclerotic

Posted on 8 March, 201928 August, 2019 by admin

 

#How to render raw html in react

there is a module html-to-react but I suggest you using  dangerouslySetInnerHTML

1
<div dangerouslySetInnerHTML={{ __html: patent && patent.nationalPhaseContent }} />

 

How to stop scrolling when is dialog

Here is written something link you have to do like that

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
onClickAddWork = e => {
  e.preventDefault()
  document.body.style.overflow = 'hidden';
  this.setState({
    addWork: true
  })
}
 
onClickCreateAddWork = e => {
  e.preventDefault()
  document.body.style.overflow = 'unset';
  this.setState({
    addWork: false
  })
}

 

How to insert google invisible recaptcha to react

so it is very easy, at firs we have to include a script to the head section. To do this we’are going to use react-helmet module

1
npm i react-helmet

 

and put code to our component

1
2
3
4
5
6
7
8
9
import { Helmet } from 'react-helmet'
...
 
...
<Helmet>
  <title>Log in</title>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</Helmet>
...

and then include a div block that is used to stick captcha

1
2
3
4
5
6
7
...
<div className="g-recaptcha"
  data-sitekey={Config.siteKey2}
  data-callback="getRecaptchaValue"
  data-size="invisible">
</div>
...

and then add a callback function in my case I’m using getRecaptchaValue that is stuck to the window object because it should be available. The getRecaptchaValue function we have to implement inside the function that is handle click of the form. In my case the handler of form is a Formik onSubmit property, so I implemented the getRecapthcaValue function in it. Here is the code of onSubmit property

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
...
onSubmit={(values, actions) => {
  actions.setSubmitting(false)
  this.setState({ isFetching: true })
  window.grecaptcha.execute(); // run the captcha
// this is the function that is a closure
  window.getRecaptchaValue = (g_token) => {
    window.grecaptcha.reset()
    console.log('Captcha g_token:', g_token);
    fetch(`/api/v1/login/`, {
      method: 'POST',
      headers: {
        // 'Content-Type': 'application/json'
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: `username=${values.username}&password=${values.password}&g_token=${g_token}`
    })
      .then(r => {
        this.setState({ isFetching: false })
        if (!r.ok) {
          console.log('r = ', r);
          actions.setStatus({ error: 'The server unavailable' });
          actions.setSubmitting(false);
        }
        return r.json()
      })
      .then(json => {
        console.log('json = ', json);
        console.log('json.error = ', json.error);
        if (json.error) {
          actions.setStatus({ error: json.error })
        }
        if (json.token) {
          const { dispatch } = this.props
          dispatch(a.setIdLoginToken(json.user.id, json.user.login, json.token, values.rememberMe || false, json.avatar ))
        }
      })
      .catch(error => {
        console.log("error = " + error);
      })
  }
}}
...

that’s it

 

How to insert google visible recaptcha

We know how to insert invisible recaptcha, now it time inserted visible checkbox captcha. We do almost the same as described here only without callback.

1. add div block to the form

1
2
3
4
5
6
7
8
<div
  class="g-recaptcha"
  data-sitekey={Config.siteKey2}
  data-callback="getRecaptchaValue"
  data-theme="dark"
  data-size="normal"
>
</div>

 

2. using react-helmet include google to the head

1
2
3
4
<Helmet>
  <title>Publish</title>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</Helmet>

3. in onSubmit formik’s method we can get the value by using next code

1
const g_token = window.grecaptcha.getResponse()

and then pass the response to the server.

The callback won’t work, so do not use it

That’s it, Pass the g_token to the server and verify.

 

How to prevent from rerendering element a few times

I have a problem when loading files to a server I added an image file and it always rerendered and flickering so it was not attractive and bad for eyes. So how I managed to solve the problem? In react is a special method calls ‘shouldComponentUpdate‘. It accepts two arguments nextProps and nextState, so that we can check out what is changed in the next state and props use such conditions

1
2
3
4
5
6
7
8
9
if (nextProps.[somevar] === this.props.[somevar]) {
  return false 
}
 
// or 
 
if (nextState.[somevar] === this.state.[somevar]) {
  return false 
}

 

Here is a real example where I used it with in the Thumb component

show »

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import React from 'react'
 
class Thumb extends React.Component {
  state = {
    loading: false,
    thumb: undefined,
    file: undefined,
  };
 
  shouldComponentUpdate(nextProps, nextState) {
    if (nextProps.file === this.props.file && this.state.loading === false) {
      return false
    }
    return true
  }
 
  componentWillReceiveProps(nextProps) {
    if(nextProps.file === this.props.file) { return; }
    if (!nextProps.file) { return; }
 
    this.setState({ loading: true }, () => {
      let reader = new FileReader();
 
      reader.onloadend = () => {
        // console.log('reader.result = ', reader.result);
        this.setState({ loading: false, thumb: reader.result });
      };
 
      reader.readAsDataURL(nextProps.file);
    });
  }
 
  render() {
    const { file } = this.props;
    const { loading, thumb } = this.state;
 
    if (!file) { return null; }
 
    if (loading) { return <p>loading...</p>; }
 
    return (<img src={thumb}
      alt={file.name}
      className="img-thumbnail mt-2"
      height={100}
      width={100} />);
  }
}
 
export default Thumb

 

 

How to get image width and height in the React with Formik

Sometimes you have to check out the image width and height, to get them you should create the image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<input
  ref={input => { this.thumbnail = input }}
  name="thumbnail"  
  type="file"
  onChange={(event) => {
    setFieldValue("thumbnail", event.currentTarget.files[0]);
    touched.thumbnail = true
 
    // check the image with and height
    var _URL = window.URL || window.webkitURL
    var file, img
    if ((file = event.currentTarget.files[0])) {
      img = new Image()
      img.onload = function() {
        console.log(this.width + " " + this.height)
        setFieldValue("thumbnailWithAndHeight", {
          width: this.width,
          height: this.height
        });
      }
      img.src = _URL.createObjectURL(file)
    }
  }}
/>

so we assigned the width and height to the thumbnailWithAndHeight property and then we check it in the Formik’s validate function

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
if (
  values.thumbnail.type === 'image/jpeg'
  || values.thumbnail.type === 'image/png'
  || values.thumbnail.type === 'image/gif') {
 
  if (values.thumbnail.size > Config.thumbnailSize) {
    errors.thumbnail = `The thumbnail couldn't be more than 1Mb`
  }
  if (values.thumbnailWithAndHeight.height) {
    if (+values.thumbnailWithAndHeight.width !== 200 || +values.thumbnailWithAndHeight.height !== 200) {
      errors.thumbnail = errors.thumbnail ? errors.thumbnail + "<br>" : ''
      errors.thumbnail += `The thumbnail should be 200x200 pixels`
    }
  }
} else if (values.thumbnail.type) {
  errors.thumbnail = `The thumnbail type could be jpeg png or gif`
}

that’s it

 

How to add radio buttons on the form with Formik

here is an example link

I make a simple usage. We have to create a RadioButton

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// Radio input
const RadioButton = ({
  field: { name, value, onChange, onBlur },
  id,
  label,
  className,
  ...props
}) => {
  console.log('field = ', name, value);
  return (
    <div>
      <input
        name={name}
        id={id}
        type="radio"
        value={id} // could be something else for output?
        checked={id === value}
        onChange={onChange}
        onBlur={onBlur}
        className={"radio-button"}
        {...props}
      />
      <label htmlFor={id}>{label}</label>
    </div>
  );
};

and than put it to the Formik’s render property like that

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div className="formGroup gender">
  <label>Gender: </label>
  <div onChange={this.onChangeGender}>
    <label>
      <Field
        component={RadioButton}
        name="gender"
        id="male"
        label="Male"
      />
    </label>
    <label>
      <Field
        component={RadioButton}
        name="gender"
        id="female"
        label="Female"
      />
    </label>
  </div>
</div>

and in the initialValue pass gender: ‘male’, and that’s it we’ll see selected by default mail radio button.

That’s it

 

How to create a complex component with in React with Formik

Sometimes we have to create a complex component like with Formik that will have a few input field. First of all it has one input than when we specified that input it will add a few more and so on. This is a complex component. To work it out we have to overload some properties namely onChange by using setFieldValue

setFieldValue is a function that assign a value to the Formik state.

Let’s look at a trivial example, here is a Test component

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
class Test extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      value1: '',
      value2: ''
    }
  }
 
  onChangeHandler1 = e => {
    const { field: { onChange }, form: { setFieldValue } } = this.props
    this.setState({ value1: e.target.value })
    setFieldValue('test', { value1: e.target.value, value2: this.state.value2 })
  }
 
  onChangeHandler2 = e => {
    const { field: { onChange }, form: { setFieldValue } } = this.props
    this.setState({ value2: e.target.value })
    setFieldValue('test', { value1: this.state.value1, value2: e.target.value })
  }
 
  render() {
    let { field: { name, value, onChange, onBlur },
          form: { errors, touched, setFieldValue },
          id,
          label,
          className,
        } = this.props
    console.log('###this.props = ', this.props);
    // value="bla-bla"
    return (
      <div>
        <input
          // name={name}
          value={this.state.value1}
          onChange={this.onChangeHandler1}
          onBlur={onBlur}
        />
        <input
          value={this.state.value2}
          onChange={this.onChangeHandler2}
          onBlur={onBlur}
        />
        {touched[name] && <div className="error">{errors[name]}</div>}
      </div>
    )
  }
}

it outputs two inputs and we want to get both values to the one variable test in our Formik. The inner form could be more complex and consist of lots of elements. So on the onChange we call the setFieldValue function to assign an object to the test of Formik. In the Formik’s render method we have such code

1
2
3
4
<Field
  component={Test}
  name="test"
/>

and

1
2
3
initialValues={{
  test: 'hello'
}}

and in the test variable on the onSubmit method we’ll get an object

1
2
3
4
onSubmit={(values, actions) => {
  actions.setSubmitting(false)
  console.log('@@@values = ', values);
}}

that’s it

 

How to add to  the Formik CheckBox component ref.

It is impossible to pass ref to the Formik’s Field component, If you do like that

1
2
3
4
5
6
7
<Field
  ref={input => this.logInAndPublish = input}
  component={Checkbox}
  id="logInAndPublish"
  type="checkbox"
  name="logInAndPublish"
/>

you’ll get a warning

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

and here is a description what to do forwarding refs

 

We can’t pass to the Field a ref because it is a third party libs, So we can use global variable window, stick to it a ref from the components like that

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// Checkbox input
class CheckboxWithGlobalRefs extends React.Component {
 
  constructor(props) {
    super(props)
  }
 
  render() {
    const {
      field: { name, value, onChange, onBlur },
      form: { errors, touched, setFieldValue },
      id,
      label,
      className,
      ref,
    } = this.props
 
    // console.log('value = ', value);
    // console.log('name = ', name);
 
    return (
      <div className={"formGroup " + id}>
        <input
          ref={input => window[name] = input}
          name={name}
          id={id}
          type="checkbox"
          value={id}
          checked={value}
          onChange={onChange}
          onBlur={onBlur}
          className={className}
          {...this.props}
        />
        <label htmlFor={id}>{label}</label>
        {touched[name] && <div className="error">{errors[name]}</div>}
      </div>
    );
  }
};

and then it will accessible from the anywhere in code like below

1
2
3
4
5
6
7
8
9
10
11
12
13
<Field
  component={CheckboxWithGlobalRefs}
  id="publishAsGuest"
  type="checkbox"
  name="publishAsGuest"
  onChange={e => {
    console.log('window.publishAsGuest = ', window.publishAsGuest);
    console.log('window.logInAndPublish = ', window.logInAndPublish);
    setFieldValue('publishAsGuest', !values.publishAsGuest)
    setFieldValue('logInAndPublish', false)
    window.logInAndPublish.checked = '';
  }}
/>

 

That’s it.

 

How to call onSubmit function from the onChange in Formik

You have to use such code

1
2
3
4
5
6
7
8
9
10
onChange={e => {
  e.persist();
  setFieldValue('logInAndPublish', true, false) // the last argument prevents validation from running
  setFieldValue('publishAsGuest', false, false) // the last argument prevents validation from running
  window.logInAndPublish.checked = true
  window.publishAsGuest.checked = ''
  console.log('submitForm = ', submitForm);
  submitForm()
  
}}

use setFieldValue with the third argument false, because without it won’t work.

 

How to scroll page in react

Sometimes you show the form on the page and you want to put the user on the top of form. To do this you have to use a window.scrollTo() function. To scroll on the top use window.scrollTo(0, 0)

You can save the current position and then return to it

1
2
3
4
5
6
7
this.setState({
  orderForm: true,
  scrollToRewarded: {
    pageXOffset: window.pageXOffset,
    pageYOffset: window.pageYOffset
  }
})

Returning back

1
2
3
4
5
6
7
8
9
10
11
12
13
14
...
const { pageXOffset, pageYOffset } = this.state.scrollToRewarded
console.log('1pageXOffset = ', pageXOffset, ' 1pageYOffset = ', pageYOffset)
setTimeout(function() {
  window.scrollTo(pageXOffset, pageYOffset)
  console.log('here we are');
}, 0)
// window.scrollTo(pageXOffset, pageYOffset)
 
return (
  <div>
 
    <Header {...this.props} locale={locale} />
...

 

How to create redirect in react with react-router-dom

You can use a few methods. The best is to use a history object

1
this.props.history.push(url)

 

Or you can use a variable and <Redirect to={} /> method something like that

1
2
3
4
5
if (this.state.redirectToOrder) {
  return (
    <Redirect push={true} to={`/${locale}/orders/${this.state.insertId}/`} />
  )
}

this method will lead to errors

 

How to make anchor by hasktag to the needed element in react

we can create a function scrollToMessages

1
2
3
4
5
6
7
8
9
scrollToMessages = () => {
  const anchor = this.props.location.hash.replace('#', '')
  if (anchor === 'messages') {
    const domElement = ReactDOM.findDOMNode(this.refs['messages']);
    if (domElement) {
      domElement.scrollIntoView();
    }
  }
}

than put the ref to the element where to scroll

1
<h2 ref="messages">Order discussion</h2>

then call the function inside componentDidMount and componentDidUpdate or whatever even handler method you would like

1
2
3
4
5
6
7
componentDidMount() {
  this.scrollToMessages()
}
 
componentDidUpdate() {
  this.scrollToMessages()
}

 

 

 

 

 

the end

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • bash (1)
  • English (9)
  • JavaScript (4)
  • node.js (22)
  • photoshop (1)
  • php (3)
  • React (9)
  • sclerotic (6)
  • Ubuntu (10)
  • Uncategorized (13)
  • Wordpress (1)

Tags

Ajax apache2 automation bash chrome-extension command line editor ejs email English English-grammar framework functions git graphql handlebars hybrid app installation javascript js linux newbie node.js node.js javascript nodemailer npm objects Performance php phpmyadmin playonlinux promise rabbitmq React react-router redis reverse-proxy session shell socket.io sublime text 3 time zones ubuntu unity webpack

Recent Comments

  • damien on How to install npm and nodejs the latest versions on ubuntu
  • Cam on How to install npm and nodejs the latest versions on ubuntu
  • Pierre on socket.io with apache as a reverse proxy on the CentOS
  • admin on How to use react-router with a few languages
  • admin on How to install npm and nodejs the latest versions on ubuntu
©2021 Kselax.ru Theme by ThemeGiant