0

Не работает код риакта

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Components</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
</head>

<body>
<div id="program"></div>

<script type="text/babel">
var Task=React.createClass({
	getInitialState: function () {
		return: {edit: false}
	},
	edit: function () {
		this.setState ({edit: true})
	},
	save: function () {
		this.setState ({edit: false})
	},
	remove: function () {
		alert("remove");
	},
	rendNorm: function () {
    return (
      <div className="box">
        <div className="text">{this.props.children}</div>
        <button onClick={this.edit} className="btn light">Редактировать</button>
        <button onClick={this.remove} className="btn red">Удалить</button>
      </div>
	   );
    },
	rendEdit: function () {
		return (
			<div className="box">
			<textarea defaultValue={this.props.children}></textarea>
			<button className="btn success" onClick={this.save}>Save</button>
			</div>
        );
	},
    render: function() {
    if (this.state.edit) {
      return this.rendEdit ();
    } else {
      return this.rendNorm ();
    }
  }
});


const app=document.getElementById("program");
ReactDOM.render(
	<div className="field">
        <Task>1</Task>
        <Task>2</Task>
        <Task>3</Task>
	</div>,	app
	);
    
</script>

<style>
body {
	background-color: #e1e388;
}

.field {
	display: flex;
	padding: 10px;
	width: 25%;
	margin-left: 37.5%;
	color: #fff;
	font-size: 1.3em;
	flex-direction: column;
	align-items: center;
}

.box {
	border: 2px solid #aaa719;
	background-color: #d4d37f;
	margin-bottom: 20px;
	padding: 10px;
	width: 80%;
}

.box:last-child {
	margin-bottom: 0;
}

button.btn {
	margin-right: 10px;
	padding: 10px;
	margin-top: 10px;
	cursor: pointer;
	font-size: 0.65em;
	color: #fff;
	outline: none;
}

.btn.light {
	background-color: #4eafc9;
	border: 2px solid #2a89a2;
}

.btn.red {
	background-color: #dda66d;
	border: 2px solid #b6821a;
}

.btn.light:hover {
	background-color: #2a89a2;
	border-color: #1d6f85;
}

.btn.red:hover {
	background-color: #b6821a;
	border-color: #946912;
}    
</style>
</body>
</html>

3
  • Вы вопрос не правильно задаете. Просто говорите почему этот код не работает. Можете объяснить что оно должно сделать, после чего перестала работать. Все по порядку и подробно. 4 янв 2018 в 7:06
  • И зачем вы используете старые библиотеки? 4 янв 2018 в 8:05
  • Почему этот самый же вопрос повторяется каждый день? 4 янв 2018 в 8:15

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.