Загружать данные во входы при вводе кода
Я обновил Кодекс. Здесь у меня есть функционал Select Autocomple, показывающий список записей из БД «Реестр». При выборе кода значение имени автоматически переименовывается. То же самое, что я хочу сделать, но с not with, я хочу вызвать более двух значений, подобных этому, на изображении, а в select - только Label и Value. Захват: [1]: https://i.stack.imgur.com/ELf1a.png
class Register extends Component {
state = {
status: "initial",
data: [],
name:'',
code:''
}
componentDidMount = () => {
this. getInfo()
}
getInfo= async () => {
try {
const response = await getAll('register')
console.info(response.data)
this.setState({
status: "done",
data: response.data
});
} catch (error) {
this.setState({
status: "error"
});
}
};
handleChangeEvent = (selectedOption) => {
this.setState({
selectedOption,
name: selectedOption.value
});
render() {
//show Name and code on Select from Register
const data = this.state.data.map( st => ({value: st.Name, label: st.Code}));
return (
<Container>
<RowContainer margin = "1px" >
<ColumnContainer margin = "10px">
<h3>Info</h3>
<label>Code</label>
<Select
width='215px'
value = {selectedOption}
onChange = {this.handleChangeEvent}
options = {data}
name = {"Code"}
/>
<label>Name</label>
<Input
width='150px'
type = "text"
name = {"Name"}
placeholder = "Name"
value = {this.state.name} />
</ColumnContainer>
</RowContainer>
</Container>
)
}
};
export default Register;
Ваш вопрос не очень ясен, они не вводятся с использованием значения кода в приведенном вами примере. Что вводить в форму для загрузки?
@SakoBu экспортная функция getAll (entity) {return axios ({method: 'get', baseURL: API_URL, headers: headers (), url: entity,})}
@TiisetsoTjabane im test width <Select value = {selectedOption} onChange = {this.handleChangeEvent} options = {data} /> и работает отлично, и измененная переменная данных. const data = this.state.data.map (st => ({значение: st.codigo, label: st.nombre})); но мне нужно с <input>
Ответы 1
You want to know how change the state for
<input/>
попробуй это
constructor(props){
super(props)
this.state = {
status: "initial",
data: [],
codigo: "",
nombre: ""
}
}
handleChangeEvent(event){
let stateUpdate = this.state;
stateUpdate[event.target.name] = event.target.value}
this.setState(stateUpdate);
}
render() {
const data = [...this.state.data];
return (
<Container>
<RowContainer margin = "1px" >
<ColumnContainer margin = "10px">
<h3>Info</h3>
<label>Codigo</label>
<Input
name = "codigo"
width='150px'
type = "text"
placeholder = "Digite el codigo"
value = {data.codigo } ref = "codigo" />
<label>Nombre</label>
<Input
name = "nombre"
width='150px'
type = "text"
placeholder = "Nombre completo"
value = {this.state.nombre} />
</ColumnContainer>
</RowContainer>
</Container>
)
}
эй, я обновил код, теперь он работает, см.
Где находится прослушиватель событий onChange для ввода Name?
имя ввода получает значение только тогда, когда опция выбрана в выборе, на изображении показано, как я хотел бы, то есть просто вставьте код во входной код, а остальные заполнены., но у меня есть без понятия
Что у вас есть? откуда это?