babel-plugin-react-v-model
Babel plugin for React component to add a syntactic sugar like Vue's v-model
.
Installation
$ npm install babel-plugin-react-v-model --save-dev
Motivation
When you are building a input in React component, usullay, you have to write two JSXAttributes (value
and onChange
) to Two-WayDataBinding, like this.
Component{;thisstate =text: '';}{const text = thisstate;return<div><input="text"==/></div>}
it looks simple, but if It is not a single input instead of a large number of inputs,It will be very troublesome. So, this plugin is born to resolve these thorny problems. With this plugin, you can easily code.
For instance,
Component{;thisstate =text: ''num: 1radioVal: 1checkboxVal: trueselectVal: 'A';}{const text num radioVal checkboxVal selectVal = thisstate;const storeData setItem = thisprops;// Store Supportedreturn<div><input="text"=/><textarea=/><label><input="radio"="radio"==/><input="radio"="radio"==/></label><input="checkbox"=/><select=><option ="A">A</option><option ="B">B</option><option ="C">C</option></select><input="number"=/><input="text"=/></div>}
Usage
Write via babelrc.
// .babelrc