Курс по React JS / Урок #12 - Использование функции в виде свойства

В этом уроке мы практически завершим работу над нашей программой и добавим в нее еще пару строк кода, которые будут использовать ранее прописанные функции. Теперь наша программа сможет как удалять компоненты, так и обновлять содержимое блока.

✔ -------------

- Уроки от #GoshaDudar 👨🏼‍💻
- Все уроки по хештегу #GoshaReactJS

[КапитанБумеранг]

Добрый день Гоша, Спасибо за уроки, для новичка просто супер, многое начал понимать!
В Атоме удалить строку - Ctrl+Shift+K (подсказка добрая без зла!!)

[ДанилСвириденко-пэ]

Всем привет! у кого не получилось запустить устаревший код.Держите современный:

class App extends React.Component{

constructor(props){
super(props)
this.state = {change:false}
this.Edit = this.Edit.bind(this)

this.Delete = this.Delete.bind(this)

this.Save = this.Save.bind(this)
}

Edit(){
this.setState({change:true})
}
Delete(){

}
Save(){
this.props.changeText(this.refs.newTxt.value, this.props.index)

}


htmlNorm(){
return(
<div className = 'box'>
<center>
<div className =
<button onClick = {this.Edit} className = "Button1">Edit</button>
<button onClick = {this.Delete} className = "Button2">Delete</button>
</center>
</div>
)
}

htmlChange(){
return(
<div className = "box">
<center><textarea ref = 'newTxt' defaultValue = {this.props.children} placeholder = 'Your order:' className = 'textar'></textarea>
<button onClick = {this.Save} className =
</div>
)
}

render(){
if(this.state.change){
return this.htmlChange()
}else{
return this.htmlNorm()
}
}
}






class Filed extends React.Component{
constructor(props){
super(props)
this.state = {
tasks:[
'MacDonalds',
'KFC',
'Burger King'
]
}
this.deleteBlock = this.deleteBlock.bind(this)
this.changeText = this.changeText.bind(this)
this.Clener = this.Clener.bind(this)
}

deleteBlock(i){
var arr = this.state.tasks
arr.splice(i, 1)
this.setState({tasks:arr})
}

changeText(text, i){
var arr = this.state.tasks
arr[i] = text
this.setState({tasks:arr})
}

Clener(sat, i){
return(<App key={i} index={i}
}

render(){
return(
<div className = "filed">

</div>
)
}
}

const app =
ReactDOM.render(<Filed/>, app)


У кого были ошибки возможно вы просто забыли дописать в classe Filed:
this.deleteBlock = this.deleteBlock.bind(this)
this.changeText = this.changeText.bind(this)
this.Clener = this.Clener.bind(this)

И в classe App:
this.Delete = this.Delete.bind(this)

[Vlad-fnsi]

не получается? вызываю родительскую функцию не получается!
Cannot read property 'remove' of undefined

[rusicsemenov]

Понять только не могу, после обновления страницы все вернется назад или он редактирует массив?

[MaximZhuravlevYT]

В React 16 выдаёт ошибку "Type error: this is undefined". bind(this) не помог (как в конструкторе, так и в теге). Что делать?

[ДанилСвириденко-пэ]

Помните о связке элементов спомощу bind

[merfiusd]

Объясните мне пожалуйста, зачем всё это городить, если на чистом JS эти функции по замене текста и удалению блока займут 5 строчек кода, а на jQuery и того меньше?

[gfgddtr]

Как remove:.... переделать в новую версию ? remove = () => {
this.setState ({deleteBlock: index});-не работает
};

[ПавелКлимов-нь]

После JQ не привычно, но мне явно нравится подход) к чёрту jq

[Vekla]

Зачем функции передавать через props почему в компоненте Task не описать их?

[НОТКАЭМУЛЬГАТОРА]

Привет Гоша, когда ты выпустишь 2д игру на с++? Хотелось бы

[ВладимирМиронов-жч]

Бред. Если прописать функции как параметры, то на каждой итерации они сами себя выполнят, что, собственно, у меня, например, и происходит.

[dmytroshepeliev]

Люди, пожалуйста, не смотрите это в 2018+ году, React.createClass уже устаревший метод, читайте официальную документацию!

[valentinknoll]

Учите нативный JS, этот функционал можно реализовать 3 функциями и одним forEach, 10-12 строчек кода все вместе, и неломать голову этими дибилками.

[StalkerSergeant]

И это современный язык программирования? Куча кода, чтобы сделать примитивные вещи, никакой IDE... Ужас, 21-й век на дворе, а до сих пор ничего лучше delphi не появилось

[valentinknoll]

в топку, учите нативный JS и PHP, а это для обезьян, также Angular-1, 2, 3, 4, 5, 6, 7, 8, 9 итд как и Реакт, все умрет,