Это мой подход к созданию калькулятора с React.js. Вы можете увидеть окончательный результат здесь Отказ
Вот исходный код в Github – https://github.com/niinpatel/calculator-react.
Сначала мы запустим команду Create-ract-app в нашем каталоге, чтобы создать базовое приложение RACT Boaterplate. Затем мы прыгаем прямо, чтобы создать наши компоненты.
Это приложение калькулятора понадобится два компонента. Одним из них является нашим компонентом результата, где мы отображим вывод, а другой – KeyPAsComponent, где нам нужно отобразить нашу клавиатуру.
В SRC Папка, мы создадим каталог под названием составные части. Вот где мы будем кодировать наши компоненты. Войдите в эту папку и создайте RecventComponent.js.
Это то, каким будет выглядеть код.
import React, {Component} from 'react';
class ResultComponent extends Component {
render() {
let {result} = this.props;
return (
{result}
)
;
}
}
export default ResultComponent;
Наш компонент результата состоит только один элемент
, который отображает содержимое от реквизитов. Далее давайте построим компонент клавиатуры. Наша клавиатура – это просто куча кнопок, которые делают что-то при нажатии. Это код для нашего файла KeyPAtComponent.js.
import React, {Component} from 'react';
class KeyPadComponent extends Component {
render() {
return (
);
}
}
export default KeyPadComponent;
Поскольку нам нужно отправить событие щелчка на родитель (с помощью информации о какой кнопке нажала), мы позвоним This.props.onclick Функция на каждой кнопке щелчок и пройти e.target.name как аргумент.
Мы определим логику этой функции в наш родительский компонент, что является App.js.
В файле App.js, который является родителем всех наших предыдущих компонентов, и который отображает все основные компоненты, мы сначала включаем все дочерние компоненты. Мы также будем включать переменную «Результат» в этой .STATE, которая передается в наше компонент результата. Это позволит нам манипулировать нашим дисплеем.
import React, { Component } from 'react';
import './App.css';
import ResultComponent from './components/ResultComponent';
import KeyPadComponent from "./components/KeyPadComponent";
class App extends Component {
constructor(){
super();
this.state = {
result: ""
}
}
render() {
return (
Simple Calculator
);
}
}
export default App;
Обратите внимание, что я прошел Это.Нектик в компонент клавиатуры, но я еще не определил его. Перед определением этой функции нам нужно сделать несколько вещей. Нам нужно создавать функции для наших основных функций калькулятора. В этом калькуляторе у меня будут три основных функция.
this.calculate => Рассчитайте результат нашего выражения, это срабатывает, когда нажата кнопка «=».
this.reset => Очистить свой выход, это срабатывает при нажатии «C».
this.backspace => Очистить последний символ, который был нажата. вызвано на «CE».
Давайте сначала создам эти функции.
import React, { Component } from 'react';
import './App.css';
import ResultComponent from './components/ResultComponent';
import KeyPadComponent from "./components/KeyPadComponent";
class App extends Component {
constructor(){
super();
this.state = {
result: ""
}
}
calculate = () => {
try {
this.setState({
// eslint-disable-next-line
result: (eval(this.state.result) || "" ) + ""
})
} catch (e) {
this.setState({
result: "error"
})
}
};
reset = () => {
this.setState({
result: ""
})
};
backspace = () => {
this.setState({
result: this.state.result.slice(0, -1)
})
};
render() {
return (
Simple Calculator
);
}
}
export default App;
Наконец, мы можем создать нашу функцию OnClick и включить его в нашу приложение.
Давай сделаем это.
import React, { Component } from 'react';
import './App.css';
import ResultComponent from './components/ResultComponent';
import KeyPadComponent from "./components/KeyPadComponent";
class App extends Component {
constructor(){
super();
this.state = {
result: ""
}
}
onClick = button => {
if(button === "="){
this.calculate()
}
else if(button === "C"){
this.reset()
}
else if(button === "CE"){
this.backspace()
}
else {
this.setState({
result: this.state.result + button
})
}
};
calculate = () => {
try {
this.setState({
// eslint-disable-next-line
result: (eval(this.state.result) || "" ) + ""
})
} catch (e) {
this.setState({
result: "error"
})
}
};
reset = () => {
this.setState({
result: ""
})
};
backspace = () => {
this.setState({
result: this.state.result.slice(0, -1)
})
};
render() {
return (
Simple Calculator
);
}
}
export default App;
Функция OnClick простая, считывает аргумент, который является названием кнопки щелчка, и изменяет состояние соответствующим образом в зависимости от передаваемого ввода.
Наконец, вы можете добавить немного CSS, чтобы он выглядел приятнее.
С этим мы завершили наше калькуляторное приложение с React.js.
Окончательный код – https://github.com/niinpatel/calculator-react/