reactjs - 输入代码时将数据加载到输入中

Question

我已经更新了代码。在这里，我有一个功能选择自动完成，显示来自数据库“注册”的记录列表。选择代码时，名称值会自动重命名。我想做同样的事情，但不使用，我想在图像中调用两个以上这样的值，在选择中只有标签和值捕获：[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.log(response.data)
          this.setState({
            status: "done",
            data: response.data

          });
        } catch (error) {
          this.setState({
            status: "error"
          });
        }
      };

          handleChange = (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.handleChange}
                            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;

标签： reactjs

Answer 1

你想知道如何改变状态<input/>

尝试这个

constructor(props){
   super(props)
   this.state = {
       status: "initial",
       data: [],
       codigo: "",
       nombre: ""
    }
 }
 handleChange(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>

   )

}