Пользовательский ввод не влияет на радиус границы правильно

Я предположил, что вы хотите применить состояния topleft, topright, bottomright и bottomleft как borderRadius — вы можете использовать интерполяция строк для добавления px к каждому значению.

const { topleft, topright, bottomright, bottomleft } = this.state;

const borderStyle = {
  borderRadius: `${topleft}px ${topright}px ${bottomright}px ${bottomleft}px`,
  background: "#73AD21",
  padding: "20px",
  width: "200px",
  height: "150px"
};

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<div id="app_root"></div>    
<script type="text/babel">
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 { topleft, topright, bottomright, bottomleft } = this.state;

    const borderStyle = {
      borderRadius: `${topleft}px ${topright}px ${bottomright}px ${bottomleft}px`,
      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>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app_root"));

</script>

нумерованная строка не распознается для встроенного стиля. 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;

Итак, что вам нужно сделать, брат, это добавить строку в состояние, когда вы устанавливаете состояние, и именно так добавляется «px». Полный код

class App extends Component {
constructor(props) {
  super(props)
  this.state = {
    topleft: '30px',
    topright: '30px',
    bottomright: '30px',
    bottomleft: '30px'
  }
}

handleChange = (event) => {
  let nam = event.target.name;
  let val = event.target.value;
  this.setState({[nam]: val+'px'});
}

render() {
  console.log(this.state.topleft);
  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="string" name="topleft" onChange={this.handleChange} />
      <input type="string" name="topright" onChange={this.handleChange} />
      <input type="string" name="bottomright" onChange={this.handleChange} />
      <input type="string" name="bottomleft" onChange={this.handleChange} />
    </div>
  );
}

}

экспортировать приложение по умолчанию;