Отключить элемент в React Js
Я новичок в React Js, и я хочу отключить некоторые элементы в соответствии с условиями
У меня есть три элемента в моей форме: один выбор и два ввода
согласно выбранному элементу один из входов должен быть отключен
это мой код компонента:
class AddUser extends React.Component {
constructor(props) {
super(props);
this.state = {
user: {
}
};
}
render() {
if (this.props.user) {
this.state.user= this.props.user;
}
return (
<div className = "form-group">
<label className = "control-label">type<span className = "symbol required"></span></label>
<select className = "form-control" name = "CompanyMeetingType" value = {this.state.user.type>
<option value = "1"> type1</option>
<option value = "2">type2</option>
<option value = "3">both</option>
</select>
</div>
<div className = "form-group">
<label className = "control-label">type1(%)<span className = "symbol required"></span></label>
<input required type = "text" name = "type1" className = "form-control" disabled = {this.state.user.type ==2} />
</div>
<div className = "form-group">
<label className = "control-label">type1(%)<span className = "symbol required"></span></label>
<input required type = "text" name = "type2" className = "form-control" disabled = {this.state.user.type ==1} />
</div>
)
}когда я изменяю выбранный элемент, отключение работает правильно, но когда я подаю выберите элемент в режиме редактирования, отключение не работает
Я добавил, но отключить не работает Все еще
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Не вижу обработчиков onChange. Пытаться:
<select
className = "form-control"
name = "CompanyMeetingType"
value = {this.state.user.type}
onChange = {(e) => this.setState({ user: { type: e.target.value } })}>
<option value = "1"> type1</option>
<option value = "2">type2</option>
<option value = "3">both</option>
</select>
class Application extends React.Component {
constructor(props) {
super(props);
this.state = {
value: '1'
}
this.handleSelect = this.handleSelect.bind(this);
}
handleSelect(e) {
console.info('enter');
this.setState({
value: e.target.value
})
}
render() {
console.info(this.state.value)
return (
<div >
<select value = { this.state.value} onChange = {this.handleSelect} >
<option value = "" >select value </option>
<option value = "1" >value 1 </option>
<option value = "2" >value 2 </option>
<option value = "3" >both </option>
</select>
<br / >
<hr / >
<input type = "text" disabled = {this.state.value == 1 || this.state.value == 3 }/>
< br / > < br / >
< input type = "text" disabled = { this.state.value == 2 || this.state.value == 3 }/>
< /div>
);
}
}
React.render( < Application / > , document.getElementById('app'))
Единственное, что вам не хватает, это функция handleSelect, которая обрабатывает событие выбора значения и устанавливает состояние. он работает отлично, как вы хотите. и если вы хотите предварительно отключить любой тег ввода по умолчанию, просто передайте это значение в состояние, чтобы, когда компонент будет отображать этот тег, будет отключен.
спасибо за ваш ответ, но когда я устанавливаю значение инициализации для выбора, отключение не работает, например, когда в функции рендеринга я устанавливаю 1 для значения, которое я ожидаю, он отключает первый ввод, но он работает неправильно
Вам нужно добавить прослушиватель событий onChange в тег select и вызвать функцию, которая будет вызывать каждый раз, когда вы выбираете любое значение параметра и где вы определяете проход функции e, с помощью которого мы можем получить любое выбранное значение. В качестве представления разработчика добавьте console.info, какое значение вы получаете. Например, добавьте console.info сразу после определения вашей функции и добавьте console.info сразу после рендеринга и распечатайте выбранный тип, чтобы вы знали, при изменении любого значения параметра вызывается функция или нет, и значение изменяется или нет.
в вашем коде есть ошибка, проверьте, как я определяю конструктор, и вам нужно добавить закрывающую фигурную скобку для конструктора, потому что конструктор и визуализация - это разные функции, визуализация не может быть внутри функции конструктора, а в функции конструктора вы this.state = {user: {}} - неправильный подход, вам следует использовать this.state: {user: {}}
У вас так много синтаксических ошибок, что у вас есть один родительский тег в jsx, <select className = "form-control" name = "CompanyMeetingType" value = {this.state.user.type> в этой строке вы отсутствует закрывающая фигурная скобка.
если вы хотите отключить первый ввод при рендеринге (без выбора какой-либо опции, просто передайте значение 1 в состоянии)
у вас нет обработчиков onChange ...