javascript - 用户输入未正确影响边框半径

Question

我的目标是创建一个边界半径预览器，用户可以在其中定义边界半径的影响。当我尝试输入时，输入值时没有任何反应。当我删除我输入的值时，默认值更改就会消失。

我尝试修改代码，并尝试搜索其他问题和答案，但我没有找到解决方案。

import React from 'react';
import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      topleft: 30,
      topright: 30,
      bottomright: 30,
      bottomleft: 30
    }
  }
  
  handleChange = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    this.setState({[nam]: val});
  }
  
  render() {

    const borderStyle = {
      borderRadius: this.state.topleft,
      background: "#73AD21",
      padding: "20px",
      width: "200px",
      height: "150px",
    }
    
    return (
      <div className="App">
        <h1>Border-Radius Previewer</h1>
        <p style={borderStyle}>Box</p>
        <p>Border-Radius Values:</p>
        <input type="number" name="topleft" onChange={this.handleChange} />
        <input type="number" name="topright" onChange={this.handleChange} />
        <input type="number" name="bottomright" onChange={this.handleChange} />
        <input type="number" name="bottomleft" onChange={this.handleChange} />
      </div>
    );
  }
}

export default App;

标签： javascriptreactjsborderradius

Answer 1

内联样式无法识别编号字符串。borderRadius: "100" 没有任何意义 你应该写borderRadius: "100px" 或borderRadius: 100

您可以简单地更新 handleChange 函数以仅保留数字作为状态值。

更新代码

import React from 'react';
import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      topleft: 30,
      topright: 30,
      bottomright: 30,
      bottomleft: 30
    }
  }
  
  handleChange = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    this.setState({[nam]: Number(val)});
  }
  
  render() {

    const borderStyle = {
      borderRadius: this.state.topleft,
      background: "#73AD21",
      padding: "20px",
      width: "200px",
      height: "150px",
    }
    
    return (
      <div className="App">
        <h1>Border-Radius Previewer</h1>
        <p style={borderStyle}>Box</p>
        <p>Border-Radius Values:</p>
        <input type="number" name="topleft" onChange={this.handleChange} />
        <input type="number" name="topright" onChange={this.handleChange} />
        <input type="number" name="bottomright" onChange={this.handleChange} />
        <input type="number" name="bottomleft" onChange={this.handleChange} />
      </div>
    );
  }
}

export default App;