Question

我有一个项目，我想知道如何在onClick事件后创建一个inpult字段？

我有那段代码：

onSubmitCell = event => {
  const newCell = prompt("Please with new URL:");
  const personCurrent = event.target.value;
  axios.patch(`http://localhost:3004/employee/${personCurrent}`, {
      cellphone: newCell
    })
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.log(error);
    });
}

它做什么？ 它得到value的{{1}}并执行alert来更新对象的属性。

我想要什么？ 而不是打开Patch，我希望它显示为alert，我得到此input的值并执行input。

有人可以帮助我吗？请？

Answer 1

您可以使用state为我分享基本代码，以便您实施。

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isPatch: false
    };
  }

  onSubmitCell = event => {
    const newCell = prompt("Please with new URL:");
    this.setState({
      isPatch: true
    });
    const personCurrent = event.target.value;
    axios
      .patch(`http://localhost:3004/employee/${personCurrent}`, {
        cellphone: newCell
      })
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.log(error);
      });
  };

  onChange = e => {
    this.setState({
      patchValue: e.target.value
    });
  };

  render() {
    return (
      <div>
        {" "}
        {this.state.isPatch && (
          <input
            type="text"
            onchange={this.onChange}
            value={this.state.patchValue}
          />
        )}{" "}
      </div>
    );
  }
}

Answer 2

您可以使用州进行。

e.g。

constructor(){
   super();
   this.state={
       showInput: false
   }
}
render(){
    return(
        <div>
            {this.state.showInput && <input />}
        </div>
    )
}

您可以将状态更改为alert，而不是true。它会显示input。

如何在ReactJS中动态创建输入字段？

2 个答案: