Почему не работает компонент React?

Question

[hdhc]

Есть форма GreeterForm, которая запрашивает имя.
При сабмите это имя должно подставляться в GreeterMessage после Hello.
В чем косяк?

class Greeter extends React.Component {
	constructor(props) {
		super(props);
		this.handleNewName =  this.handleNewName.bind(this);
		this.state = {
			name: this.props.name
		};
	}
	static defaultProps = {
		name: 'user',
		message: 'This is a default message'
	}
	handleNewName(name) {
		this.setState({
			name: name
		});
	}
	render() {
		let name = this.state.name,
			message = this.props.message;
		return (
			<div>
				<GreeterMessage />
				<GreeterForm onNewName={this.handleNewName} />
			</div>
		);
	}
}

class GreeterMessage extends Greeter {
	constructor(props) {
		super(props);
	}
	render() {
		let name = this.props.name;
		return(
			<div>
				<h1>Hello {name}!</h1>
				<p>Some text</p>
			</div>
		);
	}
}

class GreeterForm extends Greeter {
	constructor(props) {
		super(props);
		this.onFormSubmit = this.onFormSubmit.bind(this);
	}
	onFormSubmit(e) {
		e.preventDefault();

		let name = this.refs.name.value;

		if(name.length > 0) {
			this.refs.name.value = '';
			this.props.onNewName(name);
		}
	}
	render() {
		return (
			<form onSubmit={this.onFormSubmit}>
				<input type="test" ref="name" />
				<button>Set Name</button>
			</form>
		);
	}
}

let name = 'User';

ReactDOM.render(
	<Greeter name={name} />,
	document.getElementById('app')
)

Answer 1

[Mikhail Osher]

Общие косяки:

1) Дублировать props в state - моветон. Используйте defaultValue на инпутах.
2) Строковые рефы - моветон. И вообще, тут рефы не нужны - по изменению инпута нужно отдавать значение родителю через коллбэк, принятый в props

По данному примеру

1) Greeter в методе render не передает нужные props дочерним компонентам
2) Внутри компонента формы храните состояние и передавайте его в props.onSubmit

Небольшой оффтоп

Вместо привязки контекста функции в конструкторе можно писать так:

class Foo {
  onSubmit = (event) => {
    // "this" is correct instance
  };
}

Comments

[hdhc]

Это был мой первый код на react. Большое спасибо. Привязка контекста в вашем примере es7 если не ошибаюсь

[Mikhail Osher]

hdhc: нет, это es2015 arrow function.

[hdhc]

Mikhail Osher: Первый пункт я выполнил и все заработало. А для чего выполнять второй?

[Mikhail Osher]

hdhc: refs нужны только в крайнем случае. например, вы хотите открыть модальное окно, которое содержит длинный список, скажем, достижений в игре. И хотите открыть + скролл на определенное достижение - тогда можно использовать ref, чтобы найти нужный DOM элемент. А получать значения input полей с помощью refs - так себе затея. Для этого нужен state компонента, от которого, например, можно так же показывать/скрывать валидацию итд.

[hdhc]

Mikhail Osher: Спасибо, приму к сведению. Последний вопрос: Не подскажете как лучше поступить. Я изучаю react по этому курсу https://www.udemy.com/the-complete-react-web-app-d... У него хорошие отзывы и рейтинг. Проблема в том, что все обучение построено не на ES6, в то время как современная документация написана на нем. Код из курса я переписываю под ES6(есть доп.раздел включающий возможности современного реакта и объяснение того как переписать проект), из-за этого случаются косяки и ответы на свои вопросы приходится гуглить, тратя доп.время в процессе рефакторинга. Стоит ли продолжать по нему обучение, либо забить и изучать уже по документации? В курсе как-никак есть пошаговый алгоритм в освоении и практическая деятельность. Интересно ваше мнение как эксперта.

[Mikhail Osher]

hdhc: тяжелый вопрос. посмотрите курсы на egghead, почитайте статьи на medium. следите за твиттерами таких людей, как Денис gaeron Абрамов.