ReactJS(4)Forms Lifting State Up

ReactJS(4)Forms Lifting State Up

Forms
https://facebook.github.io/react/docs/forms.html
Controlled Components
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ‘'};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return ( <form onSubmit={this.handleSubmit}>
<label> Name: <input type="text" value={this.state.value} onChange={this.handleChange} /> </label>
<input type="submit" value="Submit" />
</form> );
}
}

The textarea Tag
In ReactJS textarea use value.
<textarea value={this.state.value} onChange={this.handleChange} />

The select Tag
Instead of using this selected attribute, reactJS uses a value attribute on the root select tag.

<select value={this.state.value} onChange={this.handleChange}>
<option value=“greapefruit”>Grapefruit</option>
<option value=“lime”>Lime</option>
<option value=“coconut>Coconut</option>
<option value=“mango”>Mango</option>
</select>

Handling Multiple Inputs
Put name on the state value, it is name value pair.
class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
numberOfGuests: 2
};

this.handleInputChange = this.handleInputChange.bind(this);
}

handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;

this.setState({
[name]: value
});
}

render() {
return (
<form>
<label>
Is going:
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
</label>
<br />
<label>
Number of guests:
<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
</label>
</form>
);
}
}

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

Lifting State Up
https://facebook.github.io/react/docs/lifting-state-up.html
function BoilingVerdict(props) {
if (props.celsius >= 100) {
return <p>The water would boil.</p>;
}
return <p>The water would not boil.</p>;
}

class Calculator extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {temperature: ''};
}

handleChange(e) {
this.setState({temperature: e.target.value});
}

render() {
const temperature = this.state.temperature;
return (
<fieldset>
<legend>Enter temperature in Celsius:</legend>
<input
value={temperature}
onChange={this.handleChange} />
<BoilingVerdict
celsius={parseFloat(temperature)} />
</fieldset>
);
}
}

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

One input changes will affect the display of another component.

Adding a Second Input
c —> Celsius
f —> Fahrenheit

Writing Conversion Functions
function toCelsius(fahrenheit){
return (fahrenheit - 32) * 5 / 9 ;
}

function toFahrenheit(celsius){
return (celsius * 9 / 5) + 32;
}

function tryConvert(temperature, convert){
const input = parseFloat(temperature);
if(Number.isNaN(input)){
return ‘';
}
const output = convert(input);
const rounded = Math.round(output * 1000) /1000;
return rounded.toString();
}

tryConvert('abc', toCelsius) — “”
tryConvert('10.22', toFahrenheit) — “50.296”

const scaleNames = {
c: 'Celsius',
f: 'Fahrenheit'
};

function toCelsius(fahrenheit) {
return (fahrenheit - 32) * 5 / 9;
}

function toFahrenheit(celsius) {
return (celsius * 9 / 5) + 32;
}

function tryConvert(temperature, convert) {
const input = parseFloat(temperature);
if (Number.isNaN(input)) {
return '';
}
const output = convert(input);
const rounded = Math.round(output * 1000) / 1000;
return rounded.toString();
}

function BoilingVerdict(props) {
if (props.celsius >= 100) {
return <p>The water would boil.</p>;
}
return <p>The water would not boil.</p>;
}

class TemperatureInput extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}

handleChange(e) {
this.props.onTemperatureChange(e.target.value);
}

render() {
const temperature = this.props.temperature;
const scale = this.props.scale;
return (
<fieldset>
<legend>Enter temperature in {scaleNames[scale]}:</legend>
<input value={temperature}
onChange={this.handleChange} />
</fieldset>
);
}
}

class Calculator extends React.Component {
constructor(props) {
super(props);
this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
this.state = {temperature: '', scale: 'c'};
}

handleCelsiusChange(temperature) {
this.setState({scale: 'c', temperature});
}

handleFahrenheitChange(temperature) {
this.setState({scale: 'f', temperature});
}

render() {
const scale = this.state.scale;
const temperature = this.state.temperature;
const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

return (
<div>
<TemperatureInput
scale="c"
temperature={celsius}
onTemperatureChange={this.handleCelsiusChange} />
<TemperatureInput
scale="f"
temperature={fahrenheit}
onTemperatureChange={this.handleFahrenheitChange} />
<BoilingVerdict
celsius={parseFloat(celsius)} />
</div>
);
}
}

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


References:
https://facebook.github.io/react/docs/forms.html