Я новичок в реакции js. у меня есть один выпадающий список в реакции js, и есть два варианта 1. Компания 2. Индивидуальный`
<select value={this.state.value}>
<option value="company">Company</option>
<option value="individual">individual</option>
</select>
, если я выбираю компанию, а затем
<input type="text" name="company" />
, если я выбираю индивидуальное чем показывать
<input type="text" name="individual" />
через управление состоянием в реакции js.
вот код, который я попытался с помощью кнопки onClick, чтобы скрыть и показать
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
};
}
changeColor = () => {
this.setState({
color:"blue",
brand:"audi" ,
model:"a8" ,
year:2000
});
}
state = {
isActive: false
}
handleShow = () => {
this.setState({
isActive: true
})
}
handleHide = () => {
this.setState({
isActive: false
})
}
render() {
const message = 'You selected ' + this.state.selectedValue;
return (
<div>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
<table border="1" width="100%">
<tr>
<td><h1>{this.state.brand}</h1></td>
<td><h1>{this.state.color}</h1></td>
<td><h1>{this.state.model}</h1></td>
<td><h1>{this.state.year}</h1></td>
</tr>
</table>
<button
type="button"
onClick={this.changeColor}
>Change details</button>
<hr></hr>
{this.state.isActive && <h1>i am changing state</h1>}
<button onClick={this.handleShow}>Show</button>
<button onClick={this.handleHide}>Hide</button>
<hr></hr>
</div>
);
}
}
ReactDOM.render(<Car />, document.getElementById('root'));